Configure vuex in larave application Updated 2022

    By: Manu
    1 year ago

    In this guide we are going to set up vuex 4 in our laravel 9 application. Mainly we get vuejs by default enabled in laravel app but for vuex we need some further configuration.

    First have laravel app up. So i am assuming you have a working up laravel application where we are going to add vuex. ok Great so let's get started.


    Install vuex


    Here is the command

    npm install vuex@next --save
    

    Want to read offcial docs go here


    Configuring Vuex into Laravel App


    Ok go in directory "resources/js". Here create a folder "store". Next to components folder.

    Store folder requires at-least one file "index.js". So create it


    Index.js


    Here we need to have this code

    import Vuex from 'vuex';
    import Vue from 'vue';
    
    //load Vuex
    Vue.use(Vuex)
    
    // Some Module file.
    import someModule from './modules/someModule';
    
    export default new Vuex.Store({
       modules: {
           someModule
       }
    });
    


    Note we are showing demo module getting imported from modules directory so create this directory under store folder.

    Now lets work with "app.js".


    App. js file code

    import Vue from 'vue'
    window.Vue = require('vue');
    
    //Calling Vuex store
    import store from './store'
    
    const app = new Vue({
        el: '#app',
        store,
    });
    
    
    


    First Module File


    Lets create a module file for blog, Just to get the understanding how things are organised. So in modules folder create file named "Blog.js"

    Code will look similar to this

    import axios from 'axios';
    
    
    const state = {
    
    }
    const getters = {
    
    }
    
    const actions = {
    
    }
    
    const mutations = {
        
    }
    
    export default {
        state,
        getters,
        actions,
        mutations
    }
    

    So here we have our State, Getters, Actions and Mutations.