Skip to content
Frontend for Laravel File Manager on Vue.js
Branch: master
Clone or download

laravel-file-manager (Frontend)

File manager for Laravel - Frontend - Vue.js

Backend - Laravel 5 package - alexusmai/laravel-file-manager

Laravel File Manager

v 2.0.0

  • Audio player (mp3, ogg, wav, aac), Video player (webm, mp4) - (Plyr)
  • Code editor - (Code Mirror)
  • Image cropper - (Cropper.js)
  • Zip / Unzip - only for local disks



$ 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 create 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

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


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

You can’t perform that action at this time.