Using Vuex with InertiaJS

Dan Pastori avatar
Dan Pastori September 20th, 2021

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 [email protected] --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!

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or you can buy us a beer.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We’re privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.

What topics are you interested in?
Are you interested in our upcoming book?