Vue Router – set 404 page, catch all wildcard not working Vue version 3

Vue Router with Vue 3 and trying to add a catch-all route to redirect the user if they try and access an invalid URL. When try and use the wildcard (*),


const routes = [
    path: '/',
    name: 'Home',
    component: Home
  {path: '/redirect-me', redirect: '/user'},
  {path: '*', redirect: '/'}

const router = createRouter({
  history: createWebHashHistory(),

export default router

you get the following error logged to the console:


How to fix it:

Catch all routes (/*) using a parameter with a custom regex: /:catchAll(.*)

For example:

      // path: "*",
      path: "/:catchAll(.*)",
      name: "NotFound",
      component: PageNotFound,
      meta: {
        requiresAuth: false


Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Harinder Singh

Harinder Singh

My name is Harinder Singh and I specialize in Software industry. I consider myself as a life learner. I love learning new concepts, embracing new ideas and reading and searching for innovation.