Vuefinder is a file manager component for Vue.js version 3
npm i vuefinderJS entry point (it can be index.js or main.js)
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router/auto'
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>
...| Prop | Value | Description |
|---|---|---|
| id | string | required |
| url | string | required - backend url |
| locale | string | optional - default language code ('en') |
| dark | boolean | optional - makes theme dark as default |
- 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
- code refactoring (cleanup the duplications, make reusable components)
- restyle the modals
- add more languages (only en/tr at the moment. PRs are welcomed.)
- copy/move to a folder (modal, treeview)
- transfer items between adapters
- Viewport height issue on mobile browsers
- Scrolling issue on ios devices (forced hidden scrollbar)
- Default storage naming error if not 'local' exists
- Vue3
- Cropperjs : JavaScript image cropper
- DragSelect : Selection utility
- Plupload : Upload library
- vanilla-lazyload : lazy loading for thumbnails
Copyright (c) 2018 Yusuf ÖZDEMİR, released under the MIT license