I removed the @routes from the main blade file and everything works fine but in the vue components inside the section.
My app.js file has this:
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import { Ziggy } from './ziggy.js';
Then:
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.component('InertiaHead', Head)
.component('InertiaLink', Link)
.mount(el);
},
});
My vite.config.js file:
export default defineConfig({
resolve: {
alias: {
'ziggy': '/vendor/tightenco/ziggy/src/js',
'ziggy-vue': '/vendor/tightenco/ziggy/dist/vue',
'@': '/resources/js',
},
},
optimizeDeps: {
include: ["ziggy-vue", "ziggy"],
},
...
Everything works fine on my Vue templates, but I got this js error (Uncaught ReferenceError: route is not defined) when I use the route() inside the on something like:
Inertia.post(route('logout'));