How to handle 404 pages in Vue Router
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Handling 404 errors gracefully is crucial for user experience and SEO when users visit non-existent routes in Vue applications. As the creator of CoreUI with over 25 years of web development experience, I’ve implemented robust error handling across numerous production applications. The most effective solution is using Vue Router’s catch-all route pattern with a dedicated 404 component. This ensures users receive helpful feedback instead of blank pages when navigating to invalid URLs.
Use a catch-all route with /:pathMatch(.*) pattern as the last route to capture all unmatched URLs and display a 404 page.
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import NotFound from './components/NotFound.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
]
const router = createRouter({
history: createWebHistory(),
routes
})
The catch-all route /:pathMatch(.*)* must be placed last in the routes array because Vue Router matches routes in order. When no previous route matches, this pattern captures any remaining path and displays the NotFound component. The pathMatch parameter contains the unmatched portion of the URL, which you can access in the component for logging or user feedback.
Best Practice Note:
This approach is implemented in all CoreUI Vue templates to provide consistent, professional error handling. Include navigation links in your 404 component to help users find their way back to valid pages in your application.
