Setup Ziggy with Inertia and Vue

[jeroenvanrensen]

Hello,

I'm using Laravel and I want to setup Ziggy with Inertia and Vue.

I installed the Ziggy composer package and added @routes to my layout file.

The Inertia documentation says I should add it to the Vue instance:

Vue.prototype.$route = route

However, I don't understand exactly to put it.

This is my app.js file:

import { createApp, h } from 'vue'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .component('Link', Link)
            .mount(el)
    }
})

Hope anyone can help me out.

Thanks!

[ajnsn]

Hey @jeroenvanrensen - this may help: #822

[jeroenvanrensen]

Hello, do you mean something like this?

import { createApp, h } from 'vue'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use((Vue.prototype.$route = route)) // here I added it
            .component('Link', Link)
            .mount(el)
    }
})

[ajnsn]

Hey @jeroenvanrensen There are various ways to integrate a custom method. When you want to use() a plugin, you might want to use the provided Ziggy Vue plugin https://github.com/tighten/ziggy#vue, e.g. .use(ZiggyVue, Ziggy) where Ziggy is your imported routes file.

In general this is nothing different with or without Inertia. You can add everything to the createApp chain as you would with Vue.

Note that the v2 Vue.prototype has changed in v3 to app.config.globalProperties, see here:
https://v3.vuejs.org/api/application-config.html#globalproperties

If you want to follow this "global" path, this might help as well:
#818 (comment)

[jeroenvanrensen]

Thanks now it's working!