DEV Community

Cover image for How to override laravel nova components
Jenry Mazariegos
Jenry Mazariegos

Posted on • Edited on

1

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
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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)
})
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay