Learn how to build custom tools for your Nova resources.
nova:resource-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:resource-tool
command, the tool name you pass to the command should follow the Composer vendor/package
format. So, if we were building a Stripe inspector tool, we might run the following command:
composer.json
file. All custom tools are registered with your application as a Composer “path” repository.
Nova resource 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.
fields
method. This method returns an array of fields and tools available to the resource. To register your resource tool, add your tool to the array of fields returned by this method:
canSee
method when registering your tool. The canSee
method accepts a closure which should return true
or false
. The closure will receive the incoming HTTP request:
withMeta
method to add information to the tool’s metadata, which will be available within your Tool.vue
component. The withMeta
method accepts an array of key / value options:
Tool.vue
component receives several Vue props
: resourceName
, resourceId
, and panel
. The resourceId
property contains the primary key of the resource the tool is currently attached to. You may use the resourceId
when making requests to your controllers. The panel
prop provides access to any tool options that may be available via the fields
:
stripe-inspector
tool as an example, the tool class will be located at src/StripeInspector.php
.
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/api.php
routes file. If needed, you may use this file to define any routes your tool requires.
All routes within this file are automatically defined inside a route group by your tool’s ToolServiceProvider
. The route group specifies that all routes within the group should receive a /nova-vendor/tool-name
prefix, where tool-name
is the “kebab-case” name of your tool. So, for example, /nova-vendor/stripe-inspector
. You are free to modify this route group definition, but take care to make sure your Nova tool will co-exist with other Nova packages.
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.
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: