How do I add Vuex to my Laravel Nova Tool?

I found that Nova is already using Vuex and you can add your own Vuex store module to the existing store.

This is not covered in the documentation so I don't know if this will continue to work in newer versions, but it seems to do the trick in Nova 1.3.

You can register the Vuex module to your nova-components/MyTool/resources/js/tool.js like this:

import datastore from './store/datastore'


Nova.booting((Vue, router, store) => {
    store.registerModule(
        'mynamespace/datastore', datastore
    );

    // router.addRoutes( ......


});

And you can use it in your Tool.vue like this:

<template>
    <div>
      {{ testing }}
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        mounted() {
        },
        computed: {
            ...mapGetters({
                testing: 'mynamespace/datastore/testing'
            })
        }
    }
<script>

Nova is adding all resources into this same store, so you have to use a namespaced store to prevent conflicts.

I hope this will save you some time.