Customizable File Manager For Vue 3 - vueFinder

Install & Download:

# Yarn
$ yarn add vuefinder
# NPM
$ npm install vuefinder

Description:

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)
app.use(VueFinder)
app.mount('#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
        //
      },
      ...rawProps,
    }
  },
},

Preview:

Customizable File Manager For Vue 3 Finder

Changelog:

v2.2.7 (04/13/2024)

bugfix

v2.2.5 (03/19/2024)

fix variable

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)