How to make the route helper available in a Vuex store module?

[plweil]

I'm getting ReferenceError: route is not defined.

At the top of my Vuex store module (this is with Vue 2):

import Vue from 'vue'
import { ZiggyVue } from 'ziggy'
import { Ziggy } from '@/ziggy'
Vue.use(ZiggyVue, Ziggy)

I also have these lines in my app.js file, so I'm not even sure whether I need them in my module or not.

And then I have a bunch of axios calls, e.g.,

      const {data} = await axios.get(
        route(
        'api.project.edit_data',
        { id: projectId}
        )
      )

[bakerkretzmar]

Where are all those axios calls?

[bakerkretzmar]

You're welcome! One final note, I'm pretty sure you can remove Vue.use(Ziggy) there. If Ziggy is the config object with all your routes in it, I don't think that actually does anything since it isn't a Vue plugin.

Glad it's all working for you now!

[plweil]

Yes, you're right. It's not needed. I think I was just hedging my bet. Thanks!

[plweil]

@bakerkretzmar one quick (last?) question: what is the correct way to import the ZiggyVue plugin for components when using the npm package? This is giving me an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'install')
    at Function.Vue.use (vue.esm.js:5129)
    at Module../resources/js/dashboard_admin.js (dashboard_admin.js:16)
    at __webpack_require__ (bootstrap:19)
    at startup:4
    at Function.__webpack_require__.O (chunk loaded:23)
    at startup:5
    at startup:5

dashboard_admin.js (root Vue file)

import { ZiggyVue } from 'ziggy-js'
import { Ziggy } from '@/ziggy'
Vue.use(ZiggyVue, Ziggy)

[bakerkretzmar]

I think you need import { ZiggyVue } from 'ziggy-js/vue', if that doesn't work try the whole filename, ziggy-js/vue.es.js.

[plweil]

import { ZiggyVue } from 'ziggy-js/vue'

Perfect. Thanks again!