# Nova - Customization/Filters

*Source: https://nova.laravel.com/docs/v5/customization/filters*

---

[Laravel Nova home page](https://nova.laravel.com)
v5
Search...
⌘KAsk AI
- [email protected]
- [Platform Status](https://status.laravel.com/)
- [Dashboard](https://nova.laravel.com)
- [Dashboard](https://nova.laravel.com)
Search...
Navigation
Digging Deeper
Filters
[Documentation](/docs/v5/installation)[Knowledge Base](/docs/kb/support)
- [Blog](https://blog.laravel.com)
##### Get Started
- [Installation](/docs/v5/installation)
- [Release Notes](/docs/v5/releases)
- [Upgrade Guide](/docs/v5/upgrade)
##### Resources
- [The Basics](/docs/v5/resources/the-basics)
- [Fields](/docs/v5/resources/fields)
- [Dependent Fields](/docs/v5/resources/dependent-fields)
- [Date Fields](/docs/v5/resources/date-fields)
- [File Fields](/docs/v5/resources/file-fields)
- [Repeater Fields](/docs/v5/resources/repeater-fields)
- [Field Panels](/docs/v5/resources/panels)
- [Relationships](/docs/v5/resources/relationships)
- [Validation](/docs/v5/resources/validation)
- [Authorization](/docs/v5/resources/authorization)
##### Search
- [The Basics](/docs/v5/search/the-basics)
- [Global Search](/docs/v5/search/global-search)
- [Scout Integration](/docs/v5/search/scout-integration)
##### Filters
- [Defining Filters](/docs/v5/filters/defining-filters)
- [Registering Filters](/docs/v5/filters/registering-filters)
##### Lenses
- [Defining Lenses](/docs/v5/lenses/defining-lenses)
- [Registering Lenses](/docs/v5/lenses/registering-lenses)
##### Actions
- [Defining Actions](/docs/v5/actions/defining-actions)
- [Registering Actions](/docs/v5/actions/registering-actions)
##### Metrics
- [Defining Metrics](/docs/v5/metrics/defining-metrics)
- [Registering Metrics](/docs/v5/metrics/registering-metrics)
##### Digging Deeper
- [Dashboards](/docs/v5/customization/dashboards)
- [Menus](/docs/v5/customization/menus)
- [Notifications](/docs/v5/customization/notifications)
- [Authentication](/docs/v5/customization/authentication)
- [Impersonation](/docs/v5/customization/impersonation)
- [Tools](/docs/v5/customization/tools)
- [Resource Tools](/docs/v5/customization/resource-tools)
- [Cards](/docs/v5/customization/cards)
- [Fields](/docs/v5/customization/fields)
- [Filters](/docs/v5/customization/filters)
- [CSS / JavaScript](/docs/v5/customization/frontend)
- [Assets](/docs/v5/customization/assets)
- [Localization](/docs/v5/customization/localization)
- [Stubs](/docs/v5/customization/stubs)
## On this page
- [Overview](#overview)
- [Defining Filters](#defining-filters)
- [Registering Filters](#registering-filters)
- [Building Filters](#building-filters)
  - [The Filter Vue Component](#the-filter-vue-component)
  - [Managing Filter State](#managing-filter-state)
- [Assets](#assets)
  - [Registering Assets](#registering-assets)
  - [Compiling Assets](#compiling-assets)
Digging Deeper
# Filters
Learn how to build custom filters for your Nova resources.
> ## Documentation Index
>
> Fetch the complete documentation index at: <https://nova.laravel.com/docs/llms.txt>
>
> Use this file to discover all available pages before exploring further.
## [​](#overview) Overview
Nova ships with several filter types; however, sometimes you may need a filter type that isn’t provided out of the box. For this reason, Nova allows you to build custom filters.
## [​](#defining-filters) Defining Filters
Custom filters may be generated using the `nova:custom-filter` Artisan command. By default, all new filters will be placed in the `nova-components` directory of your application. When generating a filter using the `nova:custom-filter` command, the filter name you pass to the command should follow the Composer `vendor/package` format. So, if we were building an age-range filter, we might run the following command:
```
php artisan nova:custom-filter acme/age-range
```
When generating a filter, Nova will prompt you to install the filter’s NPM dependencies, compile its assets, and update your application’s `composer.json` file. All custom filters are registered with your application as a Composer [“path” repository](https://getcomposer.org/doc/05-repositories#path).
Nova filters include all of the scaffolding necessary to build your filter. Each filter 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.
## [​](#registering-filters) Registering Filters
Nova filters may be registered in your resource’s `filters` method. This method returns an array of filters available to the resource. To register your filter, add your filter to the array of filters returned by this method:
Construct
Make
```
use Acme\AgeRange\AgeRange;
use Laravel\Nova\Http\Requests\NovaRequest;

// ...

/**
 * Get the filters available for the resource.
 *
 * @return array<int, \Laravel\Nova\Filters\Filter>
 */
public function filters(NovaRequest $request): array
{
    return [
        new AgeRange,
    ];
}
```
## [​](#building-filters) Building Filters
Each filter generated by Nova includes its own service provider and “filter” class. Using the `age-range` filter as an example, the filter class will be located at `src/AgeRange.php`.
The filter’s service provider is also located within the `src` directory of the filter, and is registered in your filter’s `composer.json` file so that it will be auto-loaded by the Laravel framework.
### [​](#the-filter-vue-component) The Filter Vue Component
When Nova generates your filter, it creates a `resources/js/components/Filter.vue` Vue component. This component contains the template and logic for your filter when it is displayed in the filter dropdown menu. By default, the component displays a simple `select` filter component, along with the needed code for updating the filter’s state.
### [​](#managing-filter-state) Managing Filter State
Custom Nova filters use Vuex to manage their state. By default, your filter’s Vue component stub contains the basic logic necessary to update the filter’s current state. When modifying your filter’s component, you should make sure the changes are committed to the Vuex store when your filter’s “selected” value changes:
```
handleChange(event) {
    this.$store.commit('updateFilterState', {
        filterClass: this.filterKey,
        value: event.target.value,
    })

    this.$emit('change')
}
```
## [​](#assets) Assets
When Nova generates your filter, `resources/js` and `resources/css` directories are generated for you. These directories contain your filter’s JavaScript and CSS.
### [​](#registering-assets) Registering Assets
Your Nova filter’s service provider registers your filter’s compiled assets so that they will be available to the Nova front-end:
app/Providers/NovaServiceProvider.php
```
use Laravel\Nova\Nova;
use Laravel\Nova\Events\ServingNova;

// ...

/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    parent::boot();

    Nova::serving(function (ServingNova $event) {
        Nova::mix('age-range', __DIR__.'/../dist/mix-manifest.json');

        Nova::translations(__DIR__.'/../resources/lang/en/age-range.json');
    });
}
```
Your components are bootstrapped and registered in the `resources/js/filter.js` file. You are free to modify this file or register additional components here as needed.
### [​](#compiling-assets) Compiling Assets
Your Nova filter contains a `webpack.mix.js` file, which is generated when Nova creates your filter. You may build your filter using the NPM `dev` and `prod` commands:
```
# Compile your assets for local development...
npm run dev

# Compile and minify your assets...
npm run prod
```
In addition, you may run the NPM `watch` command to auto-compile your assets when they are changed:
```
npm run watch
```
Was this page helpful?
YesNo
[Fields](/docs/v5/customization/fields)[CSS / JavaScript](/docs/v5/customization/frontend)
⌘I
[Laravel Nova home page](https://nova.laravel.com)
Platform
[Dashboard](https://nova.laravel.com/)[Status](https://status.laravel.com/)
Legal and Compliance
[Term of Service](https://nova.laravel.com/terms)[Privacy Policy](https://nova.laravel.com/privacy)
Assistant
Responses are generated using AI and may contain mistakes.