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
Languages
- JavaScript59.9%
- Vue39.9%
- Other0.2%