Laravel - Ziggy Err: $route is not a function

Question

Laravel - Ziggy Err: $route is not a function

5.4k views Asked by Pingo At 31 March 2022 at 16:23

I try use stack Laravel + Inertiajs + Vue3. I would like to use the ziggy library to build routes.

And my error in browser console:

Uncaught (in promise) TypeError: _ctx.$route is not a function

Laravel successful
Inertiajs successful
Vue3 successful

Next i install Ziggy

composer require tightenco/ziggy.

my app.js

require('./bootstrap');

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress'
import { ZiggyVue } from 'ziggy';

InertiaProgress.init()

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

console.log(route('test'))

my webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');


mix.alias({
    ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'),
});

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

my root blade:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
        @routes
        <script src="{{ mix('/js/app.js') }}" defer></script>
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>

my vue page Pages/Home.vue

<template>
    <Head title="Welcome" />
    <h1 class="text-9xl">Welcome</h1>
    <p>Hello, welcome to your first Inertia app!</p>

    <br>
    <InertiaLink :href="$route('test')">Test</InertiaLink>
</template>

<script>
import { Head } from '@inertiajs/inertia-vue3'

export default {
    components: {
        Head,
    },
}

</script>

Screen my error page

I will be grateful for help

Original Q&A

There are 2 answers

**Shrey** · Answer 1 · 2022-03-31 18:03:41

In app.js-

import route from 'ziggy'
import { ZiggyVue } from './ziggy'

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin) // Change this
            .mixin({ methods: { route } }) // Add this
            .mount(el)
    },
})

**OLIVIERS** · Answer 2 · 2022-08-24 22:10:38

If you're using Laravel with the Ziggy library, you have a global route() function helper available for you automatically.

Using Ziggy with Vue/Inertia, it's helpful to make this function available as a custom $route property so you can use it directly in your templates.

Option 1:

app.config.globalProperties.$route = route

Option 2:

createApp(App)
   .use({
          install(app) {
          // eslint-disable-next-line no-undef
          app.config.globalProperties.$route = route;
        },
   })

Use:

<a href="$route('users.create')">Create User</a>

TechQA.

Laravel - Ziggy Err: $route is not a function

There are 2 answers

Related Questions in LARAVEL

Related Questions in VUEJS3

Related Questions in INERTIAJS

Related Questions in ZIGGY

Popular Questions

Popular Tags

Trending Questions