Customizable File Manager For Vue 3 – vueFinder

vueFinder is a customizable, well-designed file management component for Vue 3.

To work perfectly with vueFinder, you need the vuefinder-php library for the backend.

How to use it:

1. Import the register the vueFinder.

import { createApp } from 'vue'
import App from './App.vue'
import 'vuefinder/dist/style.css'
import VueFinder from 'vuefinder/dist/vuefinder'
const app = createApp(App)

2. Add the file manager to your app.

<vue-finder id="myFinder" url="/path/to/backend/"></vue-finder>

3. Available component props.

id: {
  type: String,
  default: 'vf'
request: {
  type: [String, Object],
  required: true,
persist: {
  type: Boolean,
  default: false,
path: {
  type: String,
  default: '.',
features: {
  type: [Array, Boolean],
  default: true,
debug: {
  type: Boolean,
  default: false,
theme: {
  type: String,
  default: 'system',
locale: {
  type: String,
  default: null
maxHeight: {
  type: String,
  default: '600px'
maxFileSize: {
  type: String,
  default: '10mb'
fullScreen: {
  type: Boolean,
  default: false
selectButton: {
  type: Object,
  default(rawProps) {
    return {
      active: false,
      multiple: false,
      click: (items) => {
        // items is an array of selected items


Customizable File Manager For Vue 3 Finder


v2.2.0 (02/05/2024)

  • [bug] fix download description text colors, it is not readable when the dark mode is active
  • [new] add default locale option
  • [new] add ‘persist’ prop to vuefinder to remember last directory to be remember on page refresh.
  • [new] add ‘path’ prop to define the path to initialize first
  • [new] add full-screen prop, start in full screen mode
  • [new] add select button prop, it can be configured, its useful when fullscreen is enabled by default

v2.1.0 (02/02/2024)

  • Add theme: System
  • Bugfix

v2.0.1 (01/30/2024)

  • General Bugfixes
  • Request transform, feature select and api changes

Download Details:

Author: n1crack

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vuefinder

$ npm install vuefinder

Add Comment