FreeTemplate · Error pages
404 Not Found Page
Friendly Vue 3 404 page with a drawn compass illustration, live search suggestions and helpful links, plus a compact 500 error variant. Tailwind CSS.
by Vueplay
Vue 404 page templates
An error page is a chance to get someone back on track instead of losing them. These Vue 3 templates cover 404 not found, 500 server error and maintenance pages, styled with Tailwind CSS 4 and class-based dark mode.
Each page takes its title, message and links as props, so one component can serve several error types. Install with npm, copy the source, or edit the design in the Vueplay Studio.
FreeGood to know
Building error pages that hold up
- Return the right status code
- A 404 page should be served with an actual 404 status, not 200. In Nuxt use createError or showError, and on a static host configure the 404 fallback file.
- Add a catch-all route
- In Vue Router, add a route with path: "/:pathMatch(.*)*" that renders the not found page, so unknown URLs do not show a blank screen.
- Offer a way forward
- Include a link home, a search box or links to popular pages. Avoid blaming the visitor in the copy.
FAQ
Questions
How do I show a 404 page in Vue Router?
Add a catch-all route with path "/:pathMatch(.*)*" at the end of your routes and point it at the not found template.
Can I use these error pages in Nuxt?
Yes. Use the template inside your error.vue file and read the status code from the error prop Nuxt passes in.