How to use Ziggy with Vuex

Question

Is anyone using Ziggy with Vuex? I recently installed Ziggy (https://github.com/tighten/ziggy) so I can use Laravel's named routes in my Vue (2) files. It's working just fine my my Vue components, but it's a different story with Vuex files, where I have a number of axios calls in Vuex actions. The documentation says nothing about vuex modules, and all of my attempts to import the route method from the Ziggy vendor package result in either compilation errors or console errors on page load (e.g., route is not defined). I've tried:

import route from '../...relative-path-to.../vendor/tightenco/ziggy/dist/index.js';

import route, { ZiggyVue } from 'ziggy';

and methods suggested elsewhere (https://highlandsolutions.com/blog/how-i-like-to-simplify-ziggys-route-helper)

Answer 1

Ok I've got the answer, thanks to some tips from the Ziggy developer. First, Ziggy now comes in an npm package (which I recommend) was well as composer.

https://www.npmjs.com/package/ziggy-js

Next, to use Ziggy in a Vuex file, add this to the top of the file (this is my store.js file, which imports several Vuex modules):

import route from 'ziggy-js'
import { Ziggy }  from '@/routes';
window.route = (name, params, absolute, config = Ziggy) => route(name, params, absolute, config);

Note that this is quite different from what you do for Vue components, which need the ZiggyVue plugin. For Vuex, you have to import route() and set it up.

In a Vuex module, you can use Ziggy's route() helper method for any axios (or other ajax) calls; e.g.,

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