Using Vuex with InertiaJS

If you haven’t used InertiaJS before, I’d highly recommend checking it out. It allows you to put together an app in no time at all, saves the headache of structuring an SPA if you don’t need it, and allows you to use VueJS (or other popular frontend frameworks) as your templating engine. And of course, you can actually use Vuex with InertiaJS fairly easily. We actually use InertiaJS with Vuex in Financial Freedom, our self hosted budgeting app and it works great!

Since InertiaJS can hold session state and other global variables, you probably won’t be using Vuex to store those. However, for super complicated pages or massive forms, I still find a ton of value in having a data store that I can commit to, hold data, and share easily between components without having to worry about passing everything as a prop.

Step 1: Install Vuex

To install Vuex, all you have to do is run:

Vue 3

npm install vuex@next --save

Vue 2

npm install vuex --save

Step 2: Import Vuex

Now that Vuex has been installed, let’s import it into our app.js file:

Vue 3

import { createStore } from 'vuex'

Vue 2

import Vuex from 'vuex'
Vue.use(Vuex);

Vuex is now imported and ready to be initialized. The rest of the work we will be doing will be in the app.js file so keep it open!

Step 3: Initialize a Store

Next, you will need to define your store so add the following right below:

Vue 3

const store = createStore({
  modules: {

  }
})

Vue 2

const store = new Vuex.Store({
    modules: {
        transactions,
        transactionsImport
    }
})

We will be registering our modules in this store. If you want an overview of Vuex modules check out “Building a Vuex Module” or “Beginning Vuex 4 with Vue 3“.

Step 4: Register Vuex with InertiaJS

Now that we have our store built, all we have to do is register it with the Vue app being created for InertiaJS. This happens right before you mount the element that Vue uses and after you declare to use the InertiaPlugin:

Vue 3

createApp({
    render: () =>
      h(InertiaApp, {
        initialPage: JSON.parse(el.dataset.page),
        resolveComponent: (name) => require(`./Pages/${name}`).default,
      }),
    })
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .use(store)
    .mount(el);

Vue 2

new Vue({
    store,
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app);

All we did is appended the .use(store) method with store being the store we created above. Check out our Financial Freedom app repo where we use Vuex with InertiaJS for some more complex components. You can see the whole process and how it works together.

That’s all there is to it! Of course, reach out if you have any questions!