Vue Plugin isnt delivered with Composer package

[syntafin]

Ziggy version

2.0.4

Laravel version

10.47.0

Description

After upgrading to Ziggy 2 and changing the necressary parts I cant compile the VueJS frontend anymore, as the said VueJS plugin described here:
https://github.com/tighten/ziggy?tab=readme-ov-file#vue

doesnt exist in the package when installed via Composer, this results in an exception when trying to build the assets:

[plugin:vite:import-analysis] Failed to resolve import "../../vendor/tightenco/ziggy/dist/vue.es.js" from "resources/js/app.js". Does the file exist?

I created the file for my own from the file in the git repository, but on every update it will get deleted this way.

Ziggy call and context

import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.es.js';
import { Ziggy } from './ziggy';

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(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#f600ff',
    },
});

Ziggy configuration

-

Route definition

-

[bakerkretzmar]

In v2 the Vue plugin moved to the root of the package, so there's no vue.es.js file anymore. Update your import to:

import { ZiggyVue } from '../../vendor/tightenco/ziggy';

That should do it, let me know.

[syntafin]

Still the same problem as said above:

failed to load config from /home/syntafin/projects/DotSexy/vite.config.js
error when starting dev server:
ReferenceError: path is not defined
    at Object.<anonymous> (/home/syntafin/projects/DotSexy/vite.config.js:71:19)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at _require.extensions.<computed> [as .js] (file:///home/syntafin/projects/DotSexy/node_modules/vite/dist/node/chunks/dep-52909643.js:66350:24)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at loadConfigFromBundledFile (file:///home/syntafin/projects/DotSexy/node_modules/vite/dist/node/chunks/dep-52909643.js:66358:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async loadConfigFromFile (file:///home/syntafin/projects/DotSexy/node_modules/vite/dist/node/chunks/dep-52909643.js:66181:28)

[syntafin]

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
            ],
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        viteStaticCopy({
            targets: [
                {
                    src: 'resources/js/article/css/',
                    dest: '../assets/article'
                }
            ]
        }),
        mkcert()
    ],
    resolve: {
        alias: {
            '@': resolve('resources/js'),
            'ziggy-js': path.resolve('vendor/tightenco/ziggy'),
        },
    }
});

That's the whole Vite Config.

Updated the config, to show the recent config on local 👍

[bakerkretzmar]

Yeah that looks fine. Your error there is ReferenceError: path is not defined, are you using the path() function somewhere without importing it?

[syntafin]

I commented out the 'ziggy-js': path.resolve('vendor/tightenco/ziggy'), in the Vite config (I forgot its missed in the repo currently, only local :) ), and if I remove the import { ZiggyVue } from '../../vendor/tightenco/ziggy'; from app.js it works as expected again, but without Ziggy, what will cause an error on page load as route() isnt defined anymore.

[syntafin]

Update.... added import path from "node:path"; to vite.config.js and it works as expected and described!

Update again: It seems that route() isnt avaible globally this way.

[bakerkretzmar]

route() should be available globally in your templates, to use it in the script portion of components you'll have to import it. See the documentation in the readme.