getting _ctx.route is not a function

Question

I am trying to use ziggy by importing in laravel inertiajs app (VUE3) without using @routes but i not able to use eg. route('home').getting ctx.route is not a function error.. Please tell me how this is to be rightly put...

app.js

        require('./bootstrap');

        // Import modules...
        import { createApp, h } from 'vue';
        import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
        import { InertiaProgress } from '@inertiajs/progress';
        import { Link } from '@inertiajs/inertia-vue3'
        import { ZiggyVue } from 'ziggy';
        import { Ziggy } from './ziggy';





        const el = document.getElementById('app');

        createApp({
            render: () =>
                h(InertiaApp, {
                    initialPage: JSON.parse(el.dataset.page),
                    resolveComponent: (name) => require(`./Pages/${name}`).default,
                }),
        })
        .use(InertiaPlugin, Link, ZiggyVue, Ziggy)
        // .mixin({ methods: { route } })
            .mount(el);

        InertiaProgress.init({ color: '#4B5563' });

webpack.mix.js

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

    /*
    |--------------------------------------------------------------------------
    | Mix Asset Management
    |--------------------------------------------------------------------------
    |
    | Mix provides a clean, fluent API for defining some Webpack build steps
    | for your Laravel applications. By default, we are compiling the CSS
    | file for the application as well as bundling up all the JS files.
    |
    */

    mix.js('resources/js/app.js', 'public/js').vue()
        .postCss('resources/css/app.css', 'public/css', [
            require('postcss-import'),
            require('tailwindcss'),
        ]).alias({
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'), // or 'vendor/tightenco/ziggy/dist/vue' if you're using the Vue plugin
        })
        .webpackConfig(require('./webpack.config'));

    if (mix.inProduction()) {
        mix.version();
    }

Index.vue

    <template>
        <div class="text-blue-800">
            <Link :href="route('about')">ABOUT</Link>
            <div>HALO</div>
        </div>
    </template>

    <script>
        import { Link } from '@inertiajs/inertia-vue3'
        export default {
            components: {
                Link
            }
        }
    </script>

Error I am getting is.

    _ctx.route is not a function

Please someone help me to do it rightly... i do not want to use @routes on main blade file

Answer 1

First run the following command in your terminal

npm i ziggy-js

Then copy the following to your app.js file

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

const el = document.getElementById('app');

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

InertiaProgress.init({ color: '#4B5563' });

Make sure you import the route from 'ziggy-js' as it is shown

Answer 2

1. Install Ziggy into your Laravel

   composer require tightenco/ziggy

2. Generate resources/js/ziggy.js by

   php artisan ziggy:generate

3. Update webpack.mix.js file

   const path = require('path')
   
   mix.webpackConfig({
       resolve: {
           alias: {
               ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
           },
       },
   });
   

4. Update resources/js/app.js file

   import route from 'ziggy'
   import { ZiggyVue } from './ziggy'
   
   # add mixin as follows
   createInertiaApp({
     resolve: name => require(`./Pages/${name}`),
     setup({ el, App, props, plugin }) {
       createApp({ render: () => h(App, props) })
         .use(plugin)
         .mixin({ methods: { route } }) // add it
         .component('Link', Link)
         .mount(el)
     },
   })
   

5. Add the @routes Blade directive to your main layout, in my case, it was resources/views/app.blade.php, add in the header section.

   <head>
      ...
      @routes
   </head>