Vuefinder-zh NPM

Vuefinder File Manager

GitHub npm

ezgif-1-b902690b76

About

Vuefinder is a file manager component for Vue.js version 3

Demo

Installation

npm i vuefinder

JS entry point (it can be index.js or main.js)

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')

Html

...
<div>
    <vue-finder id='my_vuefinder' url="http://vuefinder-php.test"></vue-finder>
</div>
...

Props

Prop	Value	Default	Description
id	string	null	required
url	string	null	required - backend url
locale	string	en	optional - default language code
dark	boolean	false	optional - makes theme dark as default
max-file-size	string	10mb	optional - client side max file upload

Features

Multi adapter/storage (see https://github.com/thephpleague/flysystem)
File and folder operations
- Create a new file
- Create a new folder
- Rename
- Delete
- Archive (zip)
- Unarchive (unzip)
- Text editing
- Image Crop Tool
- Upload / Download files
- Search (deep based on current folder)
Nice UI
- Context Menu
- Breadcrumb links
- Toolbar
- File explorer
- Status bar
- Image thumbnails
- Toast notifications
Appearance
- Multi language
- Full Screen
- View Modes: list, grid
- Dark Mode
Accessibility
- Drag & drop support
- Move items (to a folder or up one folder) with drag and drop
- Mouse selection

Backend

PHP: VueFinder Php Library

Roadmap

code refactoring (cleanup the duplications, make reusable components)
restyle the modals
add more languages (only en/tr/ru at the moment. PRs are welcomed.)
copy/move to a folder (modal, treeview)
transfer items between filesystem adapters
show/hide components (toolbar/statusbar etc.)
emit select event, with @select get selected files for online editors like tinymce/ckeditor
drag&drop on folders at address bar
update DragSelect plugin for using its dropzone support