_ctx.route

[kroot007]

I'v installed a fresh laravel --jet inertia and i do this

// app.js

require('./bootstrap');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

import route from 'ziggy';
import { ZiggyVue } from 'ziggy';
import { Ziggy } from './ziggy';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
title: (title) => ${title} - ${appName},
resolve: (name) => require(./Pages/${name}.vue),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin, ZiggyVue, Ziggy)
.mixin({ methods: { route } })
.mount(el);
},
});

InertiaProgress.init({ color: '#4B5563' });

// in webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
mix.version();
}

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

after that npm run dev removing @route from app.blade and this shown on console.log
/***************************
app.js:13531

   [Vue warn]: Method "route" has type "object" in the component definition. Did you reference the function correctly? at <App>

***********************/

/******************

app.js:25599

   Uncaught (in promise) TypeError: _ctx.route is not a function
at Proxy.render (app.js:25599)
at renderComponentRoot (app.js:7443)
at ReactiveEffect.componentUpdateFn [as fn]

*****************/

[bakerkretzmar]

You need to make a separate .use() call for each Vue plugin, so try this instead:

    .use(plugin)
    .use(ZiggyVue, Ziggy)

And since you're using the Vue plugin you don't need to import the route function directly, so you can remove import route from 'ziggy';.

Does that work?

[kroot007]

it's work :)

Thank you very much

[kroot007]

but there is something when submit login page it's work but when logged out it does't work when i see why i found this

//js/Layouts/AppLayout.vue

/******************
@submit.prevent="logout()"

methods: {
switchToTeam(team) {
this.$inertia.put(route('current-team.update'), {
'team_id': team.id
}, {
preserveState: false
})
},

        logout() {
            this.$inertia.post(route('logout'));
        },
    }

*****************/

/*************/

but when see something like this it' work

/*****************

:href="route('profile.show')"

****************/

when click logout
// console.log

/*****************************************************
Uncaught ReferenceError: route is not defined
at Proxy.logout

******************************************************/

And thank you again

[bakerkretzmar]

It's a method, so in the template you can just call route() but in the <script> tags of a component you have to call this.route(). This should work:

        logout() {
            this.$inertia.post(this.route('logout'));
        },