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.

In Closing

Vuex is a very powerful state manager that can be used to build enterprise level applications. It also makes little tasks really easy.