How to customize vue-filemanager frontend in Laravel?

Question

I am using the package https://github.com/alexusmai/laravel-file-manager which comes with either a pre-compiled js file or you may use the vue-component directly through npm from https://github.com/alexusmai/vue-laravel-file-manager.

However, in both variants, the frontend is not modifiable. I am using the Laravel file-manager in my application and I would like to make customization's to the vue files to change the front-end.

What I tried so far:

• copied content of https://github.com/alexusmai/vue-laravel-file-manager/tree/master/src into /resources/assets/js/file-manager

Then I created a file_manager.js like this:

import Vue from 'vue';
import Vuex from 'vuex';
import FileManager from './file-manager/FileManager.vue';

Vue.use(Vuex);

// create Vuex store, if you don't have it
const store = new Vuex.Store();

Vue.use(FileManager, {store});


Vue.component('file-manager', FileManager);


const app = new Vue({
    store
    el: '#app'
});

And in my webpack.mix.js file I added this line:

.js('resources/assets/js/file-manager.js', 'public/js')

Now npm run dev works, but if I open the page with this content:

<div style="height: 600px;">
    <div id="app">
        <file-manager></file-manager>
    </div>
</div>
<script src="{{ asset('js/file-manager.js') }}"></script>

I get this error:

[vuex] unknown mutation type: fm/settings/manualSettings [vuex] unknown mutation type: fm/settings/initAxiosSettings [vuex] unknown action type: fm/initializeApp

Why does it happen? Do I need to include it differently?

Answer 1

You need to import and register the store modules:

import Vue from 'vue';
import Vuex from 'vuex';
import FileManager from './file-manager/FileManager.vue';
import fm from './file-manager/store';  // Import modules

Vue.use(Vuex);

// create Vuex store, if you don't have it
const store = new Vuex.Store({modules: {fm}});  // Register modules

Vue.use(FileManager, {store});

Vue.component('file-manager', FileManager);

const app = new Vue({
    store,
    el: '#app'
});

---

Explanation

The file-manager component expects the presence of a bunch of actions and mutations in the global store. In typical usage, say through the npm module, these actions and mutations defined in this entrypoint file are registered on the store here, as described in the Readme. Since you attempt to manually register the file-manager component instead of it being registered by the entrypoint file, you need to also register the module explicitly.

Yes, as an alternate solution, you could instead import from the entrypoint file init.js and use it as a plugin, so that it implicitly registers the module as well as the component:

import Vue from 'vue';
import Vuex from 'vuex';
import FileManager from './file-manager/init';  // Note 'init'

Vue.use(Vuex);

// create Vuex store, if you don't have it
const store = new Vuex.Store();

Vue.use(FileManager, {store});  // Registers the file-manager component too

const app = new Vue({
    store,
    el: '#app'
});