# CSS / JavaScript
# JavaScript
When building custom Nova tools, resource tools, cards, and fields, you may use a variety of helpers that are globally available to your JavaScript components.
# Axios
The Axios HTTP library (opens new window) is globally available, allowing you to easily make requests to your custom component's Laravel controllers:
axios.get('/nova-vendor/stripe-inspector/endpoint').then(response => {
// ...
})
# Nova Requests
As an alternative to using Axios directly, you may use the Nova.request()
method. This method configures a separate instance of Axios that has pre-configured interceptors to handle and redirect on 401
, 403
, and 500
level server errors:
Nova.request().get('/nova-vendor/stripe-inspector/endpoint').then(response => {
// ...
})
# Localizations
Localizations can be passed to the frontend from within your NovaServiceProvider
. To learn more, check out the full custom localization documentation.
# Event Bus
The global Nova
JavaScript object may be used as an event bus by your custom components. The bus provides the following methods, which correspond to and have the same behavior as the event methods provided by Vue (opens new window):
Nova.$on(event, callback)
Nova.$once(event, callback)
Nova.$off(event, callback)
Nova.$emit(event, callback)
# Notifications
Nova's Vue configuration automatically registers the Vue toasted plugin (opens new window). So, within your custom components, you may leverage the this.$toasted
object to display simple notifications:
this.$toasted.show('It worked!', { type: 'success' })
this.$toasted.show('It failed!', { type: 'error' })
# Shortcuts
Nova provides two convenience methods for managing keyboard shortcuts, powered by Mousetrap (opens new window). You may use this within your custom components to register and unregister shortcuts:
// Add single keyboard shortcut...
Nova.addShortcut('ctrl+k', event => {
// Callback...
})
// Add multiple keyboard shortcuts...
Nova.addShortcut(['ctrl+k', 'command+k'], event => {
// Callback...
})
// Add a sequence shortcut...
Nova.addShortcut('* a', event => {
// Callback...
})
// Remove a shortcut...
Nova.removeShortcut('ctrl+k')
// Remove multiple shortcuts...
Nova.removeShortcut(['ctrl+k', 'command+k'])
# Global Variables
The global Nova
JavaScript object's config
property contains the current Nova base
path and userId
:
const userId = Nova.config.userId;
const basePath = Nova.config.base;
However, you are free to add additional values to this object using the Nova::provideToScript
method. You may call this method within a Nova::serving
listener, which should typically be registered in the boot
method of your application or custom component's service provider:
use Laravel\Nova\Nova;
use Laravel\Nova\Events\ServingNova;
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Nova::serving(function (ServingNova $event) {
Nova::provideToScript([
'user' => $event->request->user()->toArray(),
]);
});
}
Once the variable has been provided to Nova via the provideToScript
method, you may access it on the global Nova
JavaScript object:
const name = Nova.config.user.name;
# Vue DevTools
By default, Nova's JavaScript is compiled for production. As such, you will not be able to access the Vue DevTools out of the box without compiling Nova's JavaScript for development. To accomplish this, you may use the following terminal commands from the root of your Nova project:
cd ./vendor/laravel/nova
mv webpack.mix.js.dist webpack.mix.js
npm install
npm run dev
rm -rf node_modules
cd -
php artisan nova:publish
Please note, compiling Nova's assets for production purposes is not supported.
# Other Available Libraries
In addition to Axios, the Lodash (opens new window) and Moment.js (opens new window) libraries are globally available to your custom components.