druxt-views

DruxtViews

The DruxtViews module adds Drupal Views support to your Nuxt.js frontend.

Links

• DruxtJS: https://druxtjs.org
• Documentation: https://views.druxtjs.org
• 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.