DruxtJS Blocks

Drupal Block and Block Region Druxt components.

Links

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

Install

$ npm install druxt-blocks

Nuxt.js

Add module to nuxt.config.js

module.exports = {
  modules: ['druxt-blocks'],
  druxt: {
    baseUrl: 'https://demo-api.druxtjs.org',
    blocks: {
      query: {
        fields: [],
      },
    },
  },
}

Usage

DruxtBlock component

The DruxtBlock component renders a Drupal JSON:API Block resource by ID or UUID.

<DruxtBlock :id="drupal_internal__id" />

<DruxtBlock :uuid="uuid" />

See the DruxtBlock API Documentation for more information.

DruxtBlockRegion

The DruxtBlockRegion component renders all visible blocks for the specified theme region.

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

See the DruxtBlockRegion API Documentation for more information.

Theming

Both components can be themed by providing a default template:

<DruxtBlock :id="id">
  <template #default="{ block }">
    {{ block }}
  </template>
</DruxtEntity>

The module also provides Wrapper components with scoped slots for theming.

See the Druxt Theming guide for more information.

Options

DruxtBlock options

These options are specific to this module.

| Option | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | block.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. |