Create a Custom 404 Component using Vuejs 3

1 year ago admin Vuejs

In today's lesson, we are going to see how to redirect a user to a custom 404 Vue Component if a route does not exist.

Demo


Add the catch all route

The catch all route is set to redirect users to a custom 404 component if the current route does not exist.

                                                        
                                                                                                                        
import {createRouter, createWebHistory}  from 'vue-router';
import Home from '@/components/Home.vue';
import NotFound from '@/components/NotFound.vue';


const routes = [
    { 
        name: 'home',
        path: '/', 
        component: Home,
    },
    {
        path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound
    },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Create the NotFound custom component

Next, we add a NotFound custom component inside we add the code below:

                                                            
                                                                                                                                
<template>
    <div class="row my-5">
        <div class="col-md-6 mx-auto">
            <div class="card">
                <div class="card-header bg-white">
                    <h4 class="text-center">
                        404 Page Not Found
                    </h4>
                </div>
                <div class="card-body">
                    <h1>The page you are looking for does not exist.</h1>
                    <router-link to="/" class="btn btn-link">
                        back home
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
</script>

<style>
</style>

Popular Tutorials

Related Tutorials

Review App Using Laravel 11 & Vue js 3 Composition API Part 5

In the last part of this tutorial, we will display the reviews list of each product, add the ability...


Review App Using Laravel 11 & Vue js 3 Composition API Part 4

In the fourth part of this tutorial, we will fetch and display all the products on the home page, vi...


Review App Using Laravel 11 & Vue js 3 Composition API Part 3

In the third part of this tutorial, we will start coding the front end, first, we will install the p...


Review App Using Laravel 11 & Vue js 3 Composition API Part 2

In the second part of this tutorial, we will create the product and review controllers, and later we...


Review App Using Laravel 11 & Vue js 3 Composition API Part 1

In this tutorial, we will create a review app using Laravel 11 & Vue js 3 Composition API, the user...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 5

In the final part of this tutorial, we will display the cart items, add the ability to increment/dec...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 4

In the fourth part of this tutorial, we will fetch and display all the products, and add the store w...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 3

In the third part of this tutorial, we will move to the front end, we will install the packages...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 2

In the second part of this tutorial, we will create the product and order controllers, add the...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 1

In this tutorial, we will create a shopping cart using vue js 3 composition API Laravel 11 and strip...