Problems with making route call, console error.

[alexv96]

I just discovered this library and I am trying to implement it, I tried to follow the tutorial installed through composer in laravel 8, I made the mention in webpack.mix.js and in the app.js file but when I navigate in the vue component the console throws me the following error

The thing is that when I do npm run dev I don't get any error, how can I fix it or make it work?

Versions

laravel/framework                    v8.73.2
tightenco/ziggy                      v1.4.2

App.js

require('./bootstrap');

window.Vue = require('vue').default;
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Vue from 'vue'
import { route } from 'ziggy';

import { Ziggy } from './ziggy';
Vue.use(route,Ziggy)
Vue.use(BootstrapVue)

Component method

        async getStages(){
            const { data } = await axios(route('status.list'))
            this.stages = data.data
        },

Layout blade

@routes
<script type="application/javascript" src="{{ mix('js/app.js') }}"></script>

<script type="application/javascript" src="{{ mix('js/custom.js') }}"></script>

webpack.mix.js

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

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

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/custom.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css')
    .sass('resources/sass/app.scss', 'public/css');

mix.scripts([
    'public/assets/quill/quill.min.js',
], 'public/js/all.js').version();

mix.styles([
    'public/assets/quill/quill.snow.css',
], 'public/css/all.css').version();

const path = require('path');

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

[bakerkretzmar]

Ok a couple things—first, because you're using the @routes Blade directive, you can just remove all the Ziggy setup from your app.js and webpack.mix.js if you want to. The route() helper is already available globally.

If you do choose to load Ziggy as a Vue plugin, you have to import ZiggyVue, not route:

- import { route } from 'ziggy';
+ import { ZiggyVue } from 'ziggy';

- Vue.use(route,Ziggy);
+ Vue.use(ZiggyVue, Ziggy);

You may also need to change your alias to ...ziggy/dist/vue, or import ZiggyVue from 'ziggy/vue.

Then, route will be accessible as a method on all your components. Inside templates you can just call route(), but inside the <script> tags of the Vue component, like in your example, it should be this.route().

You're also importing Vue twice which could be causing other problems.

Let me know if you get it working!