Drupal Views components for Druxt with support for filters, pagination and sorting.

Example DruxtView page component


  • Vue.js components:
    • DruxtView: Render a Drupal View by display as DruxtEntity components
  • View page routing and Blocks with Druxt module integrations
  • Druxt settings: Filter JSON:API fields
  • @nuxtjs/Storybook integration


  1. Download the module:

    npm i druxt-views
  2. Add the module to nuxt.config.js:

    export default {
      modules: ['druxt-views'],

Vue.js components


Renders a Drupal View using DruxtEntity components, using data provided by the Drupal JSON:API Views module.

<DruxtView :display-id="displayId" :view-id="viewId" />


Reducing Views data

The default behaviour of the Views module is to retrieve all available fields from the JSON:API, for all results.

This behaviour is configurable using the modules query option, allowing for manually filtered fields, as well as automatic filtering with the bundleFilter option.

The default behaviour can be set via nuxt.config.js:

export default {
  druxt: {
    views: {
      query: {
        bundleFilter: true,
query.bundleFilterbooleanNofalseWhether to automatically detect Resource types to filter, based on the View bundle filter.
query.fieldsstring[]No[]An array of fields to filter from the JSON:API Views Resource types.
query.resourceTypesstring[]No[]An array of Resource types to be used by the Fields filter.

Router support

The DruxtViews module provides a DruxtRouterView component that is used by the Druxt Router module to render View page routes.


DruxtViews provides zero-config, auto generated Storybook integration with a live data connnection to your Druxt backend.