Adding Vuex-ORM to Laravel Nova tool

Question

Can someone help me out with adding vuex-orm to a Laravel Nova Tool.

The base of a Laravel Nova tool has tool.js with the following content ('planning-tool' in name, and path may vary according to the name of your tool):

Nova.booting((Vue, router, store) => {
    router.addRoutes([
        {
            name: 'planning-tool',
            path: '/planning-tool',
            component: require('./components/Tool'),
        },
    ])
})

As you can see Laravel Nova already has a store present.

According to the Vuex-ORM docs (https://vuex-orm.org/guide/prologue/getting-started.html#register-models-to-vuex), I should get it started using:

import Vue from 'vue'
import Vuex from 'vuex'
import VuexORM from '@vuex-orm/core'
import User from '@/models/User'

Vue.use(Vuex)

// Create a new instance of Database.
const database = new VuexORM.Database()

// Register Models to Database.
database.register(User)

// Create Vuex Store and register database through Vuex ORM.
const store = new Vuex.Store({
  plugins: [VuexORM.install(database)]
})

export default store

Since Laravel Nova already has a Vuex store I was trying to mix it up. But as soon as I add an import related to @vuex-orm/core I get the following error:

ERROR in ./node_modules/@vuex-orm/core/dist/vuex-orm.esm.js
Module parse failed: Unexpected token (1105:21)
You may need an appropriate loader to handle this file type.
|     }
|     if (typeof target === 'object' && target !== {}) {
|         const cp = { ...target };
|         Object.keys(cp).forEach((k) => (cp[k] = cloneDeep(cp[k])));
|         return cp;
 @ ./resources/js/tool.js 1:0-37
 @ multi ./resources/js/tool.js ./resources/sass/tool.scss

My code (just so far) is:

import VuexORM from '@vuex-orm/core'

Nova.booting((Vue, router, store) => {
    router.addRoutes([
        {
            name: 'planning-tool',
            path: '/planning-tool',
            component: require('./components/NewTool'),
        },
    ])

    // Create a new instance of Database.
    const database = new VuexORM.Database()
    
    // TODO ...
})

Does anybody have a suggestion? I know I can use normal Vuex store but vuex-orm adds so many nice features (which I'm used to) that I would take me a lot of time to work with normal objects as models by looping through them and loading additional relationships.

FURTHER AHEAD

To get ahead of myself, how should I register the vuex-orm database plugin since all I can find is creating a Vuex store with the (VuexORM) plugin directly passed along. I've read that a plugin is just function with the store as the only argument, so would something like this work? I've read that it does not always work when you use it like this.

const plugin = VuexORM.install(database)
plugin(store)

Any suggestions of what to try is welcome, I've been at it for quite a while now...

Answer 1

The problem was with webpack and/or Laravel mix 1. We solved it by adding babel dependencies and upgrading Laravel mix tot ^6.0.19.

Our package.json is:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@babel/core": "^7.14.3",
        "@babel/plugin-transform-runtime": "^7.14.3",
        "@babel/preset-env": "^7.14.4",
        "@vuex-orm/core": "^0.36.4",
        "babel-loader": "^8.2.2",
        "cross-env": "^5.0.0",
        "laravel-mix": "^6.0.19",
        "vue": "^2.6.14",
        "vue-loader": "^15.9.7",
        "vuex": "^3.6.2"
    },
    "dependencies": {
        "@babel/runtime": "^7.14.0"
    }
}

Our .babelrc is:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": false
            }
        ]
    ],
    "plugins": [
        "@babel/transform-runtime"
    ]
}

Our tool.js is:

import VuexORM from '@vuex-orm/core'
import ExampleModel from './models/ExampleModel'
import Tool from './components/Tool'

Nova.booting((Vue, router, store) => {
    router.addRoutes([
        {
            name: 'planning-tool',
            path: '/planning-tool',
            component: Tool,
        },
    ])

    // Create a new instance of Database.
    const database = new VuexORM.Database()

    database.register(ExampleModel)

    const plugin = VuexORM.install(database)
    plugin(store)
})

I hope this helps someone in the future.