DruxtViews
The DruxtViews module adds Drupal Views support to your Nuxt.js frontend.
Links
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. |