Learn how to build custom tools for your Nova application.
nova:tool
Artisan command. By default, all new tools will be placed in the nova-components
directory of your application. When generating a tool using the nova:tool
command, the tool name you pass to the command should follow the Composer vendor/package
format. So, if we were building a price tracker tool, we might run the following command to generate our tool:
composer.json
file. All custom tools are registered with your application as a Composer “path” repository.
Nova tools include all of the scaffolding necessary to build your tool. Each tool even contains its own composer.json
file and is ready to be shared with the world on GitHub or the source control provider of your choice.
App/Providers/NovaServiceProvider
class. Your service provider contains a tools
method, which returns an array of tools. To register your tool, simply add it to the list of tools returned by this method. For example, if you created a Nova tool named acme/price-tracker
, you may register the tool like so:
canSee
method onto your tool’s registration. The canSee
method accepts a Closure which should return true
or false
. The Closure will receive the incoming HTTP request:
price-tracker
tool as an example, the tool class will be located at src/PriceTracker.php
. The tool class must be registered with your application’s NovaServiceProvider
as previously noted.
The tool’s service provider is also located within the src
directory of the tool, and is registered within the extra
section of your tool’s composer.json
file so that it will be auto-loaded by Laravel.
routes/inertia.php
and routes/api.php
route files.
The routes/inertia.php
file is tasked with rendering your tool via Inertia, while the routes/api.php
file may be used to define any routes that your Inertia based tool will be making requests to in order to gather additional data or perform additional tasks.
All routes within the routes/api.php
file are automatically defined inside a route group by your tool’s ToolServiceProvider
. The route group specifies that all “API routes”, which will typically be invoked from the client via Nova.request, should receive a /nova-vendor/tool-name
URL prefix, where tool-name
is the “kebab-case” name of your tool.
Similarly, routes within the routes/inertia.php
file are also placed within a route group that prefixes all of the routes within the file with the name of your tool.
You are free to modify this route group definition, but you should ensure your Nova tool will easily co-exist with other Nova packages.
Authorize
middleware. You should not typically need to modify this middleware, as it automatically determines whether the authenticated user can “see” the tool before it processes any requests to routes within your tool’s route group; however, you are free to modify this middleware if needed.
menu
method. This method should return a custom menu that renders your tool’s left-side navigation links. You are free to customize this method as needed:
Nova::mainMenu
callback.icon
method.
resources/js
and resources/css
directories are generated for you. These directories contain your tool’s JavaScript and CSS. The primary files of interest in these directories are: resources/js/components/Tool.vue
and resources/css/tool.css
.
The Tool.vue
file is a single-file Vue component that contains your tool’s front-end. From this file, you are free to build your tool however you want. Your tool can make HTTP requests using Axios via Nova.request.
boot
method. This method is executed when the tool is registered and available. By default, this method registers your tool’s compiled assets so that they will be available to the Nova front-end:
resources/js/tool.js
file. You are free to modify this file or register additional components here as needed:
webpack.mix.js
file, which is generated when Nova creates your tool. You may build your tool using the NPM dev
and prod
commands:
watch
command to auto-compile your assets when they are changed:
v-tooltip
. For example, your tool’s resources/js/pages/Tool.vue
stub will contain a default page title which is managed by the Inertia.js Head
component: