Saturday, 17 April 2021

How to customize vue-filemanager frontend in Laravel?

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:

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=""></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?



from How to customize vue-filemanager frontend in Laravel?

No comments:

Post a Comment