forked fromalexusmai/vue-laravel-file-manager
- Notifications
You must be signed in to change notification settings - Fork0
Frontend for Laravel File Manager on Vue.js
License
NotificationsYou must be signed in to change notification settings
codeperl/vue-laravel-file-manager
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Backend - Laravel package -alexusmai/laravel-file-manager
- Vue.js 3
- Bootstrap 5
- Bootstrap icons
$ npm install laravel-file-manager --saveIF your App using Vuex store
import { createApp } from 'vue';import { createStore } from 'vuex';// Source main componentimport Main from './components/Main.vue';import FileManager from 'laravel-file-manager'// your Vuex storeimport store from './path-to-your-store/store' createApp(Main).use(store).use(FileManager, {store}).mount('#id');ELSE you need to create a new vuex instance
import { createApp } from 'vue';import { createStore } from 'vuex';// Source main componentimport Main from './components/Main.vue';import FileManager from 'laravel-file-manager'// Create a new store instance.const store = createStore();createApp(Main).use(store).use(FileManager, {store}).mount('#id');The application store module will be registered under the name 'fm'
Now vue component is registered and you can use it in your app
<file-manager></file-manager>// In the new version 2.4.0 and higher<file-manager v-bind:settings="settings"></file-manager>...// settings object structurecomputed: { settings() { return { // axios headers headers: { 'X-Requested-With': 'XMLHttpRequest', Authorization: `Bearer ${window.localStorage.getItem('user-token')}`, }, baseUrl: 'http://test.loc/file-manager/', // overwrite base url Axios windowsConfig: 2, // overwrite config lang: 'de', // set language translation: { // add new translation name: de, content: { about: 'Über', back: 'Zurück', ... see lang file structure }, }, }; }, }...| Attribute | Type | Example | Required | Description |
|---|---|---|---|---|
| headers | Object | {'X-Requested-With': 'XMLHttpRequest'} | No | Axios Headers |
| baseUrl | String | 'http://my_url:80/file-manager/' | No | Axios base URL |
| windowsConfig | Int | 2 | No | 1 - only one manager, 2 - manager with folder tree, 3 - two managers |
| lang | String | 'de' | No | Set language |
| translation | Object | { ... see lang file structure }, | No | Add new translation |
Don't forget to add a csrf token to head block in your Laravel view and add bootstrap 5 and bootstrap icons 5 styles
<!-- CSRF Token --><meta name="csrf-token" content="{{ csrf_token() }}"><!-- Example --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">Laravel VITE environment variables
// set baseUrlVITE_LFM_BASE_URL=http://my-url.loc/file-manager/// if you don't want to use csrf-token - you can off itVITE_LFM_CSRF_TOKEN=OFFAbout
Frontend for Laravel File Manager on Vue.js
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Languages
- JavaScript59.9%
- Vue39.9%
- Other0.2%