[Vuejs]-How to use Ziggy with Vuex

by

0👍

✅

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}
        )
      )

Leave a comment