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.
Here is the command
npm install vuex@next --save
Want to read offcial docs go here
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
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".
import Vue from 'vue' window.Vue = require('vue'); //Calling Vuex store import store from './store' const app = new Vue({ el: '#app', store, });
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.