Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

MDelisle's avatar

Html tags not recognized using Inertia and Vue

Hi I am trying to follow and reproduce the Luke Downing course : Real Time Games With Laravel and at the end of the first episode, when the route inside the <Link> tag is entered as indicated in the video:

Based on the episode 1, the instructor indicates that the project has been generated using Breeze, Inertia and Vue which I tried 3 times from scratch but always end to get this white page.

digging inside the code I see this line has been added into app.js, I am assuming from the initial installation:

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

however, when I am checking the content of this folder, vue.es is not there. I see index.esm.js, index.js and route.umd.js.

Doesn't knowing what contain vue.es, I has tried to replace it by each of those files into this directory but still got this white page.. I am stuck to go further on this.

Any advises will be appreciated.

Thanks in advance Mario

0 likes
3 replies
LaryAI's avatar
Level 58

It seems like you're encountering an issue with the Ziggy package integration in your Laravel, Inertia, and Vue setup. The problem appears to be related to the import path for Ziggy in your app.js file. Here's how you can resolve this issue:

  1. Check Ziggy Installation: First, ensure that Ziggy is properly installed in your Laravel project. You can do this by running:

    composer require tightenco/ziggy
    
  2. Correct Import Path: The import path in your app.js file might be incorrect. Instead of import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.es';, you should use:

    import { ZiggyVue } from 'ziggy';
    

    This assumes that you have Ziggy installed via npm. If not, you can install it using:

    npm install ziggy
    
  3. Ensure Ziggy is Configured Correctly: Make sure that Ziggy is properly configured in your webpack.mix.js or vite.config.js (depending on your build tool). If you're using Vite, you might need to add Ziggy as a plugin:

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    import ziggy from 'ziggy/vite';
    
    export default defineConfig({
        plugins: [
            laravel({
                input: ['resources/js/app.js'],
                refresh: true,
            }),
            ziggy(),
        ],
    });
    
  4. Rebuild Assets: After making these changes, ensure you rebuild your assets. If you're using Laravel Mix, run:

    npm run dev
    

    Or if you're using Vite:

    npm run build
    
  5. Check for Errors: If you still encounter a white page, check the browser console for any JavaScript errors that might give you more insight into what's going wrong.

By following these steps, you should be able to resolve the issue with the Ziggy import and get your Inertia and Vue setup working correctly. If the problem persists, double-check the documentation for any updates or changes in the package usage.

RemiM's avatar

How do you install your application, using laravel new [application-name]or composer? If you follow the regular process with laravel new, everything is working straight out of the box and you don't have to import ZiggyVue anywhere, it's already installed and taking care of for you.

MDelisle's avatar

@RemiM I was expecting that as I was doing a simple installation.. Having that in mind, I have finally found my issue... ---> games/store was written instead of games.store (some automatic autofill completing paths the "old" fashion with '/'.... When I replace the '/' by '.' the page start to be shown...

Please or to participate in this conversation.