# CSS / JavaScript

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.

← Fields Filters →