vuetify.js

How do I create a 404-NotFound error page in Vuetify3?


I'm new to VueJS and Vuetify as well.

I'm trying to create a 404-page within the pages folder, but it doesn't work from ways I know.

In NextJS for example there are predefined Routes in order to do that (Loading, Error-page, etc.)

Unfortunately, there is no mentioning in the Vuetify documentation on how to do that (except the 404-page itself from the Docs, which is a bit funny I think).

I know how to do that in a regular Vite/VueJS app with a 404-catch-all route.

However, in a vuetify app there is the pages folder and I've assumed that there is a reserved route (something like in NextJS).

I've created a NotFound.vue page component in the pages folder, but that doesn't work.


Solution

  • According to the docs, one has to create a page [...page].vue in the pages folder. This route will match all routes and will display this page when no other routes are matching.

    src/pages/[...page].vue

    That's it.