Blocks - DruxtJS

DruxtBlocks brings Drupal's block layout to Nuxt. DruxtBlockRegion renders every visible block Drupal places in a theme region, and DruxtBlock renders one block anywhere in your layout. Both resolve through the Druxt component suggestion system, so overriding one block's markup takes one Vue component.

Example DruxtBlockRegion component

Features

Vue.js components:
- DruxtBlock renders Drupal blocks by UUID or internal ID
- DruxtBlockRegion renders all blocks within a region
Druxt settings filter JSON:API fields
@nuxtjs/Storybook integration

Installation

Included with druxt-site. Install it separately only when composing modules yourself.

Install the package:
```
npm i druxt-blocks
```

Add the module to nuxt.config.js:

export default {
  modules: ['druxt-blocks'],
};

Development releases

Every change merged to develop is published under the dev tag:

npm i druxt-blocks@dev

These are unreleased builds. See development releases before using one.

Vue.js components

DruxtBlock

Renders a Drupal Block by UUID or Drupal's internal ID.

<DruxtBlock :id="drupal_internal__id" />

<DruxtBlock :uuid="uuid" />

For more details, refer to the DruxtBlock API documentation.

DruxtBlockRegion

Renders all visible blocks by theme and region name.

<DruxtBlockRegion :name="name" :theme="theme" />

For more details, refer to the DruxtBlockRegion API documentation.

Settings

Reducing Block data

The default behaviour of the Block module is to retrieve all available fields from the JSON:API.

This behaviour is configurable using the modules query option, allowing for manually filtered fields.

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

druxt: {
  blocks: {
    query: {
      fields: ['dependencies'],
    },
  },
}

Storybook

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

DruxtBlocks Storybook integration

For more details, see the Storybook guide.

Options

DruxtBlock options

These options are specific to this module.

Option	Type	Required	Default	Description
`blocks.query.fields`	`string[]`	No	`[]`	An array of fields to filter all Block JSON:API queries.

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.
`endpoint`	`string`	No	`/jsonapi`	JSON:API Endpoint of the Drupal installation.

Note: The contents of this file were automatically generated from the packages/blocks/README.md.