Progress indicators - Inertia.js

Hello!

I am in the progress of updating my web app to @inertiajs/vue3: ^1.0.0 and vite: ^4.0.0 having previously used Webpack. I have followed the instructions on the Inertia JS website however I can't get my progress indicator to work. My app.js says:

import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
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) })
            .component('InertiaLink', Link)
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);
    },
    progress: {
        color: '#41CD00'
    },
});

Everything works fine except the progress bar. I can see in my app-dfdc09cb.js in the public/build/assets directory it says ,progress:{color:"#41CD00"}}); which suggests it is being compiled from an app.js point of view but for whatever reason it isn't showing up on my pages. Do I need to import it as a component or add anything to my app.blade.php file? My head tag in my app.blade.php currently includes the following:

    <head>
        <!-- Scripts -->
        @routes
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
    </head>

I want to avoid having to create a custom progress indicator if possible. I don't think an #nprogress element is showing up on my page at all but I could be wrong as I am struggling to debug it.

Thanks

Shuggy123

2 years ago

Level 1

I have just installed a fresh Jetstream app and it looks like it isn't working out of the box there either:

composer create-project laravel/laravel example-app
cd example-app
composer require laravel/jetstream
php artisan jetstream:install inertia

Please or to participate in this conversation.