Setup with Laravel Vite + Inertia (Vue3) - _ctx.route is not a function

[alancwoo]

I'm trying to get this running with Laravel Vite, Inertia and Vue 3.

I've set up my vite.config.ts to resolve vendor/tightenco/ziggy/dist/vue, but import { ZiggyVue } from ziggy results in an error: The requested module '/vendor/tightenco/ziggy/dist/vue.js' does not provide an export named 'ZiggyVue'.

The files are indeed present at vendor/tightenco/ziggy/dist/vue.js

I've tried import * as ZiggyVue from ziggy which works, but then any reference to route() in my templates results in _ctx.route is not a function

1. Why can't the import find ZiggyVue?
2. Should I be using ziggy-js rather than the composer package?
3. Do I still need @routes in app.blade.php if the route file is imported as a plugin in main.ts?

Thanks very much any help!

main.ts

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { resolvePageComponent } from 'vite-plugin-laravel/inertia'
import * as ZiggyVue from 'ziggy';
import { Ziggy } from '../js/ziggy.js';

createInertiaApp({
	resolve: (name) => resolvePageComponent(name, import.meta.glob('../views/pages/**/*.vue')),
	setup({ el, app, props, plugin }) {
		createApp({ render: () => h(app, props) })
			.use(plugin)
			.use(ZiggyVue, Ziggy)
			.mount(el)
	},
})

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import laravel from 'vite-plugin-laravel'
import vue from '@vitejs/plugin-vue'
import inertia from './resources/scripts/vite/inertia-layout'
import path from 'path'

export default defineConfig({
	plugins: [
		inertia(),
		vue(),
		laravel(),
	],
	resolve: {
		alias: {
			ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'),
		},
	},
})

[bakerkretzmar]

Does import { ZiggyVue } from 'ziggy' work if you change the alias path in your Vite config to a specific file path including the extension, and use vue.es.js or vue.m.js instead of just vue.js?

2. Should I be using ziggy-js rather than the composer package? No, using the Composer package is fine, and in my opinion easier because it's less to install and keep updated.
3. Do I still need @routes in app.blade.php if the route file is imported as a plugin in main.ts? Nope!

[alancwoo]

Ah thanks a lot for the response, you're right, the following vite config works:

resolve: {
  alias: {
    ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue.es.js'),
  },
},

Regarding question 3, I did notice for some reason route() was not working without the @routes declaration in the blade root.

[bakerkretzmar]

Nice 👍🏻

Gotcha, I think I might know what's happening here. Was it only not working inside your component <script>? In Vue 3, using the Composition API, the route() function has to be injected manually into every component body that needs it. It's available automatically in all your templates, but inside the component script you may need to add:

import { inject } from 'vue';

const route = inject('route');

The reason the @routes Blade directive 'fixes' this is because it makes route() available globally on the page.