[SOLVED] @route is not recognized in app.blade.php after setting up ziggy on laravel 8 vue3 inertiajs

@route is not recognized in app.blade.php after setting up ziggy on laravel 8 vue3 inertiajs

the @route directive stays like and just treated as an ordinary string even after setting up Ziggy and running npm run watch and/or npm run production.

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="/css/app.css" rel="stylesheet" />
    @routes
    <script src="/js/app.js" defer></script>
</head>

Supposedly, @routes should be converted into <?php echo app('Tightenco\Ziggy\BladeRouteGenerator')->generate(); ?> (basing from the source code of the InertiaJS demo app downloaded at https://inertiajs.com/demo-application), but for some reason it stays like thta.

Here are my codes:

webpack.mix.js

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

const path = require('path');

mix
    .js('resources/js/app.js', 'public/js').vue()
    .sass('resources/css/app.scss', 'public/css')
    .webpackConfig(
    {
        output: {
            chunkFilename: 'js/[name].js?id=[chunkhash]',
        }
    }
).alias({
    ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'),
});

app.blade.php

<!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>
</head>
<body>

@inertia
</body>
</html>

app.js

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

InertiaProgress.init()
createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({el, App, props, plugin}) {
        const app = createApp({render: () => h(App, props)})
            .use(plugin, ZiggyVue, Ziggy)
            .mixin({ methods: { route: window.route } });

        app.config.globalProperties.$route = (a, b = {}) => {
            const token = new URLSearchParams(window.location.search).get('t');

            b["t"] = token;
            route(a, b)
        };
        // app.config.globalProperties.$token = token;
        app.mount(el);
    },
})

composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "require": {
        "php": "^7.3|^8.0",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "inertiajs/inertia-laravel": "^0.4.4",
        "laravel/framework": "^8.54",
        "laravel/sanctum": "^2.11",
        "laravel/tinker": "^2.5",
        "tightenco/ziggy": "^1.4"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.2",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3.3"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

i followed the steps at https://inertiajs.com/server-side-setup to setup the middleware and change the default app.blade.php to include the @inertia directive

appreciate the help!

Solution

ok so i checked InertiaJS's sample CRM project and looked at the generated app.blade.php file, and @routes was replaced with <?php echo app('Tightenco\Ziggy\BladeRouteGenerator')->generate(); ?>. I replaced @routes with that and the route() function's working now. would still appreciate if there's a better way to do it.