Laravel Nova & Vuex… a future proof solution?!

If you follow my stories, you probably know by now that I’ve got an ongoing fight to get Vuex properly working with my Laravel Nova admin site.

A quick recap

The first iteration was to attach a Vuex Store to the Nova global object, which works… but not an ideal one…

The second trial was to modify the Source files for Nova to access the Root creation and append my Vuex store there. (This is a viable approach if you don’t install Nova through composer). This approach was quickly deprecated by version 1.1.9 which added Vuex, and since then some parts of Nova use it as well.

A solution?!

After Nova 1.2 we have a modular Vuex store available on the root instace (where it’s proper place is), and is accessible through the this.$store object! This enables us to do lots of “evil & nasty” things 😈

  1. You’ll need to install vuex for your tool / resource tool
  2. In your tool’s resource/js/components/Tool.vue file, on the created() life cycle event, you can dynamically register your store object with this.$store.registerModule()
  3. To use the store, you can access the state through the this.$store object, or (my favourite) the map helpers: mapGetters, mapActions, …

This is a future proof method because the team probably won’t remove Vuex support in the future, and this is a supported, although little know way adding modules to the Vuex store.

It’s recommended that you namespace your modules to avoid collisions with other libraries!

I am one of the lucky ones, who was able to turn a hobby into a way of living 😁 | If you like what I’m doing, buy me a coffe at https://ko-fi.com/blackfyre