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