Using route function inside .vue components

[miglm]

I read all the discussions and comments, but I just can not find a solution to my problem.

I use Ziggy version - 1.5.1, Laravel v.10.9.0, Inertia JS Vue 3 v.1.0.6. I don't use the @routes directive in my .blade templates, but use Ziggy as a Vue plugin.

In .vue components, calling the route function in the <template> section works fine, but calling the route function in the <script> section throws an "Uncaught ReferenceError: route is not defined" error. In one of the discussions I saw a recommendation to use this.route(), but that also results in an "Uncaught TypeError: Cannot read properties of undefined (reading 'route')" error.

How can I solve this problem? Thank you.

I am also attaching the code used.

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue.m"),
        },
    },
});

app.js

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { Ziggy } from './ziggy';
import { ZiggyVue } from 'ziggy';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Sample Title';

const app = createInertiaApp({
    title: (title) => `${title} · ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    progress: {
        color: '#FFCC33',
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
}).catch(e => {
    console.error(e)
})

Sample usage in Login.vue

export default {

    // ...Some code...

    setup() {
        const form = useForm({
            username: '',
            password: '',
            remember: false,
        });

        const submit = () => {
            form.transform(data => ({
                ...data,
                remember: form.remember ? 'on' : '',
            })).post(this.route('login'), { // Doesn't work at all :(
                onFinish: () => form.reset('password'),
            });
        };

        return { form, submit };
    }

    // ...Some code...

}

[bakerkretzmar]

Inside setup() or <script setup> you have to retrieve the route function manually, in your case since you're using the Vue plugin you can just add const route = inject('route'); and that'll work.

See #588 (reply in thread) and #564 (comment).