Learn how to build custom fields for your Nova resources.
nova:field
Artisan command. By default, all new fields will be placed in the nova-components
directory of your application. When generating a field using the nova:field
command, the field name you pass to the command should follow the Composer vendor/package
format. So, if we were building a color-picker field, we might run the following command:
composer.json
file. All custom fields are registered with your application as a Composer “path” repository.
Nova fields include all of the scaffolding necessary to build your field. Each field 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 available to the resource. To register your field, add your field to the array of fields returned by this method:
withMeta
method to add information to the field’s metadata, which will be available within your field’s Vue components. The withMeta
method accepts an array of key / value options:
field
Vue prop
. The field
property provides access to any field options that may be available:
color-picker
field as an example, the field class will be located at src/ColorPicker.php
.
The field’s service provider is also located within the src
directory of the field, and is registered within the extra
section of your field’s composer.json
file so that it will be auto-loaded by Laravel.
resources/js/components/IndexField.vue
Vue component. This component contains the template and logic for your field when it is displayed on a resource index page. By default, this component simply displays the field’s value in a simple <span>
element; however, you are free to modify this field component as needed.
resources/js/components/DetailField.vue
Vue component. This component contains the template and logic for your field when it is displayed on a resource detail page. By default, this template contains the necessary mark-up needed to display your field’s value. However, you are free to adjust this template as required by your application.
resources/js/components/FormField.vue
Vue component. This component contains the template and logic for your field when it is displayed on a creation or update form. By default, this template contains a simple input
control to modify your field’s underlying value; however, you are free to customize this template. For example, we may update the template to display a color-picker control:
FormData
as needed. This may be done in your FormField.vue
file’s fill
method:
FormField
mixin. However, if you are building a dependent field, you should replace FormField
with DependentFormField
:
this.currentField
instead of this.field
:
Laravel\Nova\Fields\SupportsDependentFields
trait on your Field
class:
fillAttributeFromRequest
method on your field class:
$requestAttribute
, which is the name of the incoming form field on the HTTP request. Additionally, it receives the $attribute
, which is the name of the model attribute the field’s value should be placed in.
resources/js
and resources/css
directories are generated for you. These directories contain your field’s JavaScript and CSS.
resources/js/field.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 field. You may build your field using the NPM dev
and prod
commands:
watch
command to auto-compile your assets when they are changed:
nova:install
NPM command installs the mixins used by Nova’s built-in fields for use in your field. Please refer to the Nova mixins documentation for more information.