@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('TightencoZiggyBladeRouteGenerator')->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!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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('TightencoZiggyBladeRouteGenerator')->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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x