Setting up Vuex in a Laravel project can seem complicated as it is super easy to forget something and cause your app to blow up.
So in this blog post, I will outline how I set up Vuex in a fresh Laravel install.
Let's Start by Installing Vuex:
yarn add vuex
Then make sure you are using it in your app.js
file.
import Vuex from 'vuex';
Vue.use(Vuex)
Then instantiate a new Vuex Store.
I like to use require()
to import the required objects.
let store = new Vuex.Store({
state: require('./vuex/state'),
mutations: require('./vuex/mutations'),
actions: require('./vuex/actions'),
getters: require('./vuex/getters'),
})
Go ahead and create those files with only the following content:
module.exports = {}
Then add the store to your app
Vue object:
let app = new Vue({
store
}).$mount('#app')
And that's it! Now you should have Vuex set up in your project and ready for use.
Vuex is a very powerful state manager that can be used to build enterprise level applications. It also makes little tasks really easy.