Vuefinder is a file manager component for Vue.js version 3
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')
Vue Template
...
<div>
<vue-finder id='my_vuefinder' :request="request"></vue-finder>
</div>
...
<script setup>
const request = "http://vuefinder-php.test"
// Or ...
const request = {
// ----- CHANGE ME! -----
// [REQUIRED] Url for development server endpoint
baseUrl: "http://vuefinder-php.test",
// ----- CHANGE ME! -----
// Additional headers & params & body
headers: { "X-ADDITIONAL-HEADER": 'yes' },
params: { additionalParam1: 'yes' },
body: { additionalBody1: ['yes'] },
// And/or transform request callback
transformRequest: req => {
if (req.method === 'get') {
req.params.vf = "1"
}
return req;
},
// XSRF Token header name
xsrfHeaderName: "X-CSRF-TOKEN",
}
</script>
Prop | Value | Default | Description |
---|---|---|---|
id | string | null | required |
request | object | null | required - backend url or request object, see above |
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 |
- 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
- restyle the modals
- add more languages (only en/tr/ru at the moment. PRs are welcomed.)
- emit select event, with @select get selected files for online editors like tinymce/ckeditor
- code refactoring (cleanup the duplications, make reusable components)
- copy/move to a folder (modal, treeview)
- transfer items between filesystem adapters
- show/hide components (toolbar/statusbar etc.)
- drag&drop on folders at address bar
- update DragSelect plugin for using its dropzone support
- Vue3
- Cropperjs : JavaScript image cropper
- DragSelect : Selection utility
- Uppy : Upload library
- vanilla-lazyload : lazy loading for thumbnails
Copyright (c) 2018 Yusuf ÖZDEMİR, released under the MIT license