How to use route() in setup() of vue 3 component?

Ziggy version

v1.3.5

Laravel version

v8.54.0

Description

Working on a project with Laravel/Inertia stack (from breeze starter kit). Here is a part of code in app.js

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ElementPlus, { locale })
            .mixin({ methods: route }) // avoid namespace conflict with Element Plus NaveMenu component
            .mount(el);
    },
});

I am trying to use composition API on my components. I got ‘route() undefined’ error if I try using ‘ctx.route()’. So my question is how I can use route() helper in setup() to access route params? Thanks!

Ziggy call and context

//

Ziggy configuration

//

Route definition

//

[sprklinginfo]

Million thanks @bakerkretzmar. One thing I didn’t mention is that I had to alias the route() to appRoute() in the app.js since I also use Element Plus UI, which seems to conflict with its navMenu component:

vueApp.mixin({ methods: { appRoute: route } });

so in template, appRoute(‘register’) etc. works. but in setup() it gave out ‘appRoute is not defined’ error. so I tried with options api, e.g. in data() to access this.appRoute().params which has no errors. After reading your new reply, I tried route() in setup() it works!!

when I tried with the second solution before, I didn’t remove .mixin({ methods: { route } }) from the app.js, I guess that is why it didn’t work.

[fahmiegerton]

I’ve got route is not a function when using with axios, but make it as a seperate function inside the setup and now it works!