Laravel Jetstream Vue mixin route

Question

In a new Laravel project created by the installer with the Jetstream option resources/js/app.js has a line that reads: Vue.mixin({ methods: { route } });

PHPStorm reports that route is an unresolved variable or type. This happens, PHPStorm can be wrong. In a newly created application this does not cause an error.

However, when I upgraded an existing project to Laravel 8.10.0 and installed Jetstream via composer this does cause and issue. When running this npm run dev does not error, but the browser will report app.js:44258 Uncaught ReferenceError: route is not defined.

I can find no difference in app.js or bootstrap.js that would cause this. Where does this get imported or included so that I can check if it was done correctly in my upgrade?

Answer 1

The newly created app and the update both create a Blade template that includes the @routes directive. As I was comparing existing files I did not notice this difference.

This can be corrected by including the @routes directive in your blade template prior to the main scripts being loaded, as documented in the installation guide for ziggy.

Answer 2

With the suggestion of ToothlessRebel, this is how I solved my error :

Step 1 command line :

composer require tightenco/ziggy
npm install ziggy-js
php artisan ziggy:generate "resources/js/ziggy.js"

step 2 : modify webpack.mix.js :

mix.js('resources/js/app.js', 'public/js')
    ...
    .webpackConfig(require('./webpack.config'));

And in ./webpack.config :

const path = require('path');
module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
            ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
        },
    },
};

Step 3 : app.js :

import route from 'ziggy';
import {
    Ziggy
} from './ziggy';
...
Vue.mixin({
    methods: {
        route: (name, params, absolute) => route(name, params, absolute, Ziggy),
    },
});
...
new Vue({
    el: "#app",
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),

});

and finally a command : npm run dev

So, my dashboard and all mixin/ziggy routes are working... Not anymore my vue-router routes ... I guess I have a conflit I have to resolve, but it's an other problem