Ziggy not defined

The error "Ziggy not defined" is occurring because the Ziggy object is not defined in the code. To fix this, you need to import the ziggy object from your routes/web.php file.

Here's how you can do it:

1. Install the ziggy-js package using npm:

npm install ziggy-js

1. In your webpack.mix.js file, add the following code:

const path = require('path');
const { Ziggy } = require('./vendor/tightenco/ziggy/dist/js/route');

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

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .alias({
        '@': path.resolve('resources/js'),
    })
    .webpackConfig({
        output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
        resolve: {
            alias: {
                ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),
            },
        },
    })
    .version();

1. In your app.js file, import the ziggy object:

import { Ziggy } from 'ziggy';

1. Finally, pass the ziggy object to the createInertiaApp function:

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}`).default,
    setup({ el, App, props }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

Note: Make sure to replace ./Pages/${name} with the correct path to your pages.