People searching “Inertia progress bar Vue” think the visit has no feedback. The Vue starter kit already starts the bar in resources/js/app.ts. A slow pagination request is when you notice the color.
TL;DR
- The progress bar is a setting on createInertiaApp.
- A second progress library fights the one the kit starts.
- Do not install NProgress.
- Do not hide the bar by setting the color to the page background and then report that visits “do nothing”.
The fix#
Find createInertiaApp and set the color if the default disappears on your background:
createInertiaApp({
progress: {
color: "#6422e0",
},
// setup stays as the kit generated it
});progress: false turns the bar off. That is the line to delete if a tutorial told you to disable it and the page now looks frozen.
The bar tracks Inertia visits: Link, router.post, and useForm. It does not track a fetch() you wrote beside Inertia. A file upload uses the Form component’s own progress, which the upload guide reads. Do not install NProgress. The kit already includes the indicator.
What to avoid#
Gotcha
Do not hide the bar by setting the color to the page background and then report that visits “do nothing”.
FAQ#
How do I show the Inertia progress bar?
The progress bar is a setting on createInertiaApp. A second progress library fights the one the kit starts.
What goes wrong with Inertia progress bar Vue?
Many developers think the visit has no feedback. Do not install NProgress.
