Resource icon

Clean code vue-laravel-file-manager by alexusmai 2.5.2

No permission to download Buy VIP
  • Hi Guest, Do you have an idea for us? Post it here and maybe you will win the VIP Master package! (VIP For the rest of your membership!)
laravel-file-manager (Frontend)
File manager for Laravel - Frontend - Vue.js
Backend - Laravel 5 package - alexusmai/laravel-file-manager
Laravel File Manager

v 2.4.0
Now you can overwrite default settings using props

$ npm install laravel-file-manager --save

IF your App using Vuex store

import FileManager from 'laravel-file-manager'
import store from './path-to-your-store/store' // your Vuex store

Vue.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'


// create Vuex store, if you don't have it
const 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 structure
settings: {
// 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 versions
Vue.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


Available Props
settings - Object
headersObject{'X-Requested-With': 'XMLHttpRequest'}NoAxios Headers
baseUrlString'http://my_url:80/file-manager/'NoAxios base URL
windowsConfigInt2No1 - only one manager, 2 - manager with folder tree, 3 - two managers
langString'de'NoSet language
translationObject{ ... see lang file structure },NoAdd new translation
CSRF, Bootstrap, FontAwesome
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="">
<link rel="stylesheet" href="">

You can use environment variables

// set baseUrl

// if you don't want to use csrf-token - you can off it

Warning! Package use axios (Promise) - use babel-polyfill for ie11
Extention type
File size
1.1 MB
First release
Last update
0.00 star(s) 0 ratings