Learn how to build custom cards for your Nova application.
nova:card
Artisan command. By default, all new cards will be placed in the nova-components
directory of your application. When generating a card using the nova:card
command, the card name you pass to the command should follow the Composer vendor/package
format. So, if we were building a traffic analytics card, we might run the following command:
composer.json
file. All custom cards are registered with your application as a Composer “path” repository.
Nova cards include all of the scaffolding necessary to build your card. Each card 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.
cards
method. This method returns an array of cards available to the resource. To register your card, add your card to the array of cards returned by this method:
canSee
method when registering your card. 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 card’s metadata, which will be available within your Card.vue
component. The withMeta
method accepts an array of key / value options:
Card.vue
component receives a card
Vue prop
. This property provides access to any card options that may be available on the card:
analytics
card as an example, the card class will be located at src/Analytics.php
.
The card’s service provider is also located within the src
directory of the card, and is registered in the extra
section of your card’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 card requires.
All routes within this file are automatically defined inside a route group by your card’s CardServiceProvider
. The route group specifies that all routes within the group should receive a /nova-vendor/card-name
prefix, where card-name
is the “kebab-case” name of your card. So, for example, /nova-vendor/analytics
. You are free to modify this route group definition, but take care to make sure your Nova card will co-exist with other Nova packages.
resources/js
and resources/css
directories are generated for you. These directories contain your card’s JavaScript and CSS stylesheets. The primary files of interest in these directories are: resources/js/components/Card.vue
and resources/css/card.css
.
The Card.vue
file is a single-file Vue component that contains your card’s front-end. From this file, you are free to build your card however you want. Your card can make HTTP requests using Axios via Nova.request.
script
and style
using the following code:
resources/js/card.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 card. You may build your card using the NPM dev
and prod
commands:
watch
command to auto-compile your assets when they are changed: