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.