- Notifications
You must be signed in to change notification settings - Fork0
Frontend for Laravel File Manager on Vue.js
License
lovekrissh143/vue-laravel-file-manager
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
File manager for Laravel - Frontend - Vue.js
Backend - Laravel 5 package -alexusmai/laravel-file-manager
Now you can overwrite default settings using props
$ npm install laravel-file-manager --saveIF your App using Vuex store
import FileManager from 'laravel-file-manager'import store from './path-to-your-store/store' // your Vuex storeVue.use(FileManager, {store})ELSE you need to create a new vuex instance
import Vue from 'vue';import Vuex from 'vuex';import FileManager from 'laravel-file-manager'Vue.use(Vuex);// create Vuex store, if you don't have itconst store = new Vuex.Store();Vue.use(FileManager, {store});The application store module will be registered under the name 'fm'
You can overwrite some default settings
// In the new version 2.4.0 and higher<file-manager v-bind:settings="settings"></file-manager>...// settings object structuresettings: { // 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 }, },},...// Old versionsVue.use(FileManager, { store, // required // not required params headers: { 'X-Requested-With': 'XMLHttpRequest', 'Authorization': 'Bearer ...' }, // default headers example headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': 'set laravel csrf token here...' }, baseUrl: 'http://my_url:80/file-manager/', // overwrite base url Axios windowsConfig: 2, lang: 'de', // set language translation: { // add new translation name: de, content: { about: 'Über', back: 'Zurück', ... see lang file structure }, },}Now vue component is registered and you can use it in your app
<file-manager></file-manager>| 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 add a csrf token to head block in your Laravel view and add bootstrap 4 and fontawesome 5 styles
<!-- CSRF Token --><meta name="csrf-token" content="{{ csrf_token() }}"><!-- Example --><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">You can useenvironment variables
// set baseUrlMIX_LFM_BASE_URL=http://my-url.loc/file-manager/// if you don't want to use csrf-token - you can off itMIX_LFM_CSRF_TOKEN=OFFWarning! Package use axios (Promise) - use babel-polyfill for ie11
About
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
Languages
- JavaScript56.9%
- Vue42.8%
- Other0.3%