How to override laravel nova components

Hello again! Before starting the tutorial, you must have Laravel Nova already installed. Let's dive right in!

Note: This tutorial is based on Laravel 10 and Nova 4.

Introduction

In this tutorial, we will learn how to customize the 404 error page in Laravel Nova. By default, Laravel Nova includes a 404 error page component, but if we want to customize it, there isn't a straightforward way to do so. Follow these steps to override Nova's default 404 error page with your own custom page.

Step 1

We will use a Laravel Nova command to create a resource tool that will allow us to override the component. The resource tool must be named in the following format: vendor/custom-nova-components, where vendor is required, and you can choose any name after the /.

Run the following command:

php artisan nova:resource-tool vendor/custom-nova-components

Laravel will prompt you with a few questions, and you should answer "yes" to all of them.

After installing the resource tool, you will see a new directory called nova-components where you will find your custom resource tool, in my case custom-nova-components.

Step 2

Now, we will override the CustomError404 component, which is the default view used by Laravel Nova for 404 errors. You can find the original component in:

vendor/laravel/nova/resources/js/views/CustomError404.vue

In our resource tool, locate the tool.js and Tool.vue files. Rename Tool.vue to CustomError404.vue. Next, register the component in tool.js as follows:

import CustomError404 from './components/CustomError404.vue'

Nova.booting((app, store) => {
  app.component('CustomError404', CustomError404)
})

As you can see, we've used the same name, CustomError404, as in the Nova package. This will override the default Nova component with our custom one.

Step 3

Once the component is registered, you can customize your CustomError404.vue as you like. After making your changes, run in directory nova-components/custom-nova-components the following command to compile the changes:

npm run prod

That's it! You've successfully overridden the default Nova 404 error page.

Tips and notes

• Before overriding any Nova component, make sure to locate the component you want to customize in vendor/laravel/nova.
• You can use the same resource tool to override multiple components. Simply create additional Vue files in the components directory and register them in tool.js using the corresponding component name.
• Note that overridden components will inherit the default Nova layout, which cannot be changed.