DruxtBlock

The DruxtBlock component renders a Drupal Block by UUID or by its block placement machine name.

While the DruxtBlock component can't automatically render every Drupal block, it does provide the Block settings to a targeted Druxt wrapper component for manual theming.

See

Example (Render a block using id)

<DruxtBlock id="umami_branding" />

Example (Render a block using uuid)

<DruxtBlock uuid="59104acd-88e1-43c3-bd5f-35800f206394" />

Example (DruxtBlock Wrapper component boilerplate)

<template>
  <DruxtDebug :json="block" />
</template>

<script>
import { DruxtBlocksBlockMixin } from 'druxt-blocks'
export default {
  mixins: [DruxtBlocksBlockMixin]
}
</script>

Example (DruxtBlock default slot (template injection))

<DruxtBlock id="umami_branding">
  <template #default="{ block }">
    <!-- Do whatever you want here -->
    <DruxtDebug :json="block" />
  </template>
</DruxtBlock>

DruxtBlock
- static
  - .props
    - .id : string
    - .uuid : string
    - .langcode : string
    - .v-model : mixed
    - .wrapper : (boolean | object)
  - .computed
    - .block ⇒ object
  - .druxt
    - .template
    - .componentOptions(context) ⇒ ComponentOptions
    - .fetchConfig()
    - .propsData(context) ⇒ PropsData
    - .slots(h) ⇒ ScopedSlots
  - .data()
  - .methods
  - .fetch()
  - .lang(vm) ⇒ string
- instance
  - .error(err, [context])
  - .getModuleComponents() ⇒ Components
  - .getModulePropsData(wrapperProps) ⇒ object
  - .getScopedSlots() ⇒ object
  - .getWrapperData(component) ⇒ WrapperData

.props

The DruxtBlock component requires either the uuid or id property.

Kind: static property of DruxtBlock

.props
- .id : string
- .uuid : string
- .langcode : string
- .v-model : mixed
- .wrapper : (boolean | object)

.id : `string`

The block placement machine name, as configured on Drupal's Block layout page (/admin/structure/block).

Kind: static property of props
Default: "null"
Example

<DruxtBlock id="umami_branding" />

.uuid : `string`

The Block Entity UUID.

If used, the id prop will be ignored.

Kind: static property of props
Default: "null"
Example

<DruxtBlock uuid="59104acd-88e1-43c3-bd5f-35800f206394" />

.langcode : `string`

The resource langcode.

Kind: static property of props
Example

@lang vue
<DruxtBlock langcode="en" />

.v-model : `mixed`

The Vue.js v-model binding for the module.

Setting a value provides the module data directly, so the Drupal JSON:API fetch is skipped.

Kind: static property of props
Default:
Example

@lang vue
<template>
  <DruxtBlock v-model="model" />
</template>

<script>
export default {
  data: () => ({ model: { foo: 'bar' } })
}
</script>

.wrapper : `(boolean` | `object)`

The wrapper component configuration.

Used to set the wrapper component, class, style and propsData.

Kind: static property of props
Default: () => undefined
Example

<DruxtBlock
  :wrapper="{
    component: 'BCard',
    class: 'article-card',
    propsData: { noBody: true }
  }"
/>

.computed

Kind: static property of DruxtBlock

.block ⇒ `object`

The Block entity data.

Kind: static property of computed
Returns: object - The Block entity JSON:API resource data.

Param	Type	Description
vm	`object`	The component ViewModel.
vm.resource	`object`	The Block JSON:API resource.

.druxt

Druxt module configuration.

Kind: static property of DruxtBlock

.druxt
- .template
- .componentOptions(context) ⇒ ComponentOptions
- .fetchConfig()
- .propsData(context) ⇒ PropsData
- .slots(h) ⇒ ScopedSlots

.template

Druxt development template tool configuration.

Kind: static property of druxt

.componentOptions(context) ⇒ `ComponentOptions`

Provides the available component naming options for the DruxtWrapper.

Kind: static method of druxt

Param	Type	Description
context	`object`	The module component ViewModel.
context.block	`object`	The Block entity data.

.fetchConfig()

Fetches the Block JSON:API resource by either UUID or ID.

Kind: static method of druxt

.propsData(context) ⇒ `PropsData`

Provides propsData for the DruxtWrapper.

Kind: static method of druxt

Param	Type	Description
context	`object`	The module component ViewModel.
context.block	`object`	The Block entity data.

.slots(h) ⇒ `ScopedSlots`

Provides the scoped slots object for the Module render function.

A default slot is provided with debug information if Nuxt is in development mode.

Kind: static method of druxt
Returns: ScopedSlots - The Scoped slots object.

Param	Type	Description
h	`function`	The Vue createElement function.

.data()

Provides the fetched Block resource state.

Kind: static method of DruxtBlock
Properties

Name	Type	Description
resource	`object`	The JSON:API resource object.

.methods

Kind: static property of DruxtBlock

.fetch()

Loads the Druxt module data and applies a wrapper component as required.

Important: If your component has an existing fetch method, you must manually invoke the DruxtModule.fetch() hook.

Kind: static method of DruxtBlock
Example (Manually invoking DruxtModule.fetch().)

import DruxtModule from 'druxt/components/DruxtModule.vue'
export default {
  name: 'DruxtCustomModule',
  extends: DruxtModule,
  async fetch() {
    await DruxtModule.fetch.call(this)
  },
  druxt: {
    componentOptions: () => ([['Default']]),
    propsData: ({ model }) => ({ value: model }),
  }
}

.lang(vm) ⇒ `string`

The current language code: the langcode prop if set, otherwise the route's langcode metadata.

Used by Druxt modules to fetch the correct resource translation.

Kind: static method of DruxtBlock
Returns: string - The current language code.

Param	Type	Description
vm	`object`	The component ViewModel.
vm.langcode	`string`	The `langcode` prop.
vm.$route	`object`	The current route.