druxt-views

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

Links

• DruxtJS: https://druxtjs.org
• Documentation: https://druxtjs.org/modules/views
• Community Discord server: https://discord.druxtjs.org

Install

$ npm install druxt-views

Nuxt.js

Add module to nuxt.config.js

module.exports = {
  modules: [
    'druxt-views'
  ],
  druxt: {
    baseUrl: 'https://demo-api.druxtjs.org',
    views: {
      bundleFilter: true,
      fields: ['title'],
    },
  },
}

Usage

DruxtView component

The DruxtView component uses the JSON:API Views module to render a Decoupled Drupal View.

<DruxtView view-id="frontpage" />

The View can be themed by providing a default scoped slot:

<DruxtView view-id="frontpage">
  <template #default="{ results }">
    {{ results }}
  </template>
</DruxtView>

The component also provides a DruxtWrapper component for theming:

<template>
  <div>
    <slot name="sorts" />
    <slot name="results" />
    <slot name="pager" />
  <div>
</template>

See the DruxtViews API documentation for more information.

Options

Druxt Views options

These options are specific to this module.
| Option | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | views.query.bundleFilter | boolean | No | false | Whether to automatically detect Resource types to filter, based on the View bundle filter. | | views.query.fields | string[] | No | [] | An array of fields to filter from the JSON:API Views Resource types. | | views.query.resourceTypes | string[] | No | [] | An array of Resource types to be used by the Fields filter. |

Base Druxt options

These options are available to all Druxt modules.
| Option | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | axios | object | No | {} | Axios instance settings. | | baseUrl | string | Yes | null | Base URL for the Drupal installation. |