Modules

DruxtSite

The DruxtSite component renders all available Drupal block regions and content, based on the specified theme.

While Drupal provides placement configuration for blocks, it does not provide any information on where each region should be placed.

Each region is provided as a scoped slot for the Druxt Wrapper component.

Typedefs

ComponentOptions : Array.<array>

Provides the available naming options for the Wrapper component.

PropsData : object

Provides propsData for use in the Wrapper component.

ScopedSlots : object

Provides scoped slots for use in the Wrapper component.

Components : Array.<object>

The list of candidate Wrapper components, with naming parts and global registration state.

ComponentData : object

The Wrapper component and propsData to be rendered.

WrapperData : object

Druxt settings and registered props retrieved from the Wrapper component.

DruxtSite

The DruxtSite component renders all available Drupal block regions and content, based on the specified theme.

While Drupal provides placement configuration for blocks, it does not provide any information on where each region should be placed.

Each region is provided as a scoped slot for the Druxt Wrapper component.

See: DruxtBlockRegion
Example

<template>
  <DruxtSite theme="umami" />
</template>

Example (DruxtSite Wrapper component boilerplate)

<template>
  <div>
    <slot name="header" />
    <slot name="content" />
    <slot name="footer" />
  </div>
</template>

<script>
import { DruxtSiteMixin } from 'druxt-site'
export default {
  mixins: [DruxtSiteMixin]
}

Example (DruxtSite with template injection)

<DruxtSite>
  <template #default="{ props, regions, theme }">
    <!-- Do whatever you want here -->
    <DruxtBlockRegion
      v-for="region of regions"
      :key="region"
      v-bind="props[region]"
    />
  </template>
</DruxtSite>

• DruxtSite
  • static
    • .props
      • .theme : string
      • .langcode
      • .v-model
      • .wrapper
      • .props ⇒ object
      • .regions : Array.<string>
    • .computed
      • .props ⇒ object
      • .regions ⇒ Array.<string>
    • .druxt
      • .template
      • .componentOptions(context) ⇒ ComponentOptions
      • .fetchConfig()
      • .propsData(context) ⇒ PropsData
      • .slots(h) ⇒ ScopedSlots
  • instance
    • .error(err, [context])
    • .getModuleComponents() ⇒ Components
    • .getModulePropsData(wrapperProps) ⇒ object
    • .getScopedSlots() ⇒ object
    • .getWrapperData(component) ⇒ WrapperData
  • static
    • .methods
    • .data(vm)
    • .fetch()
    • .lang(vm) ⇒ string

.props

Kind: static property of DruxtSite

• .props
  • .theme : string
  • .langcode
  • .v-model
  • .wrapper
  • .props ⇒ object
  • .regions : Array.<string>

.theme : string

Drupal theme ID.

Used to filter the available regions from the Drupal Blocks JSON:API resources.

Kind: static property of props

.langcode

The resource langcode.

Kind: static property of props
Example

<DruxtSite langcode="en" />

.v-model

The module component model value.

Used to bypass the Drupal JSON:API fetch, setting the module data directly.

Kind: static property of props
Example

<DruxtSite v-model="{ foo: bar }" />

.wrapper

The wrapper component configuration.

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

Kind: static property of props
Example

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

.props ⇒ object

DruxtBlockRegion propsData for regions.

Kind: static property of props

.regions : Array.<string>

The Block region names.

Kind: static property of props

.computed

Kind: static property of DruxtSite

• .computed
  • .props ⇒ object
  • .regions ⇒ Array.<string>

.props ⇒ object

DruxtBlockRegion propsData for regions.

Kind: static property of computed

.regions ⇒ Array.<string>

An array of unique region names.

Kind: static property of computed

.druxt

Druxt module configuration.

Kind: static property of DruxtSite

• .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 Druxt Wrapper.

Kind: static method of druxt

.fetchConfig()

Fetches theme filtered region names from the Block JSON:API resources to be used to render the <DruxtBlockRegion />'s.

Kind: static method of druxt

.propsData(context) ⇒ PropsData

Provides propsData for the DruxtWrapper.

Kind: static method of druxt

.slots(h) ⇒ ScopedSlots

Provides the scoped slots object for the Module render function.

A scoped slot is provided for each block region available, as per the specified theme.

Additionally, the default slot will render all regions, or the Nuxt component when no block region data is available.

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

Example (DruxtSiteTheme.vue)

<template>
  <div>
    <slot name="content" />
    <slot :name="region_name" />
  </div>
</template>

.error(err, [context])

Sets the component to render a DruxtDebug error message.

Kind: instance method of DruxtSite

.getModuleComponents() ⇒ Components

Get list of module wrapper components.

Kind: instance method of DruxtSite

.getModulePropsData(wrapperProps) ⇒ object

Get module propsData via modules druxt.propsData() callback.

Kind: instance method of DruxtSite

Example

{
  $attrs: { entity: {}, fields: {}, langcode: 'en', schema: {} },
  props: { value: {} },
  propsData: { entity: {}, fields: {}, langcode: 'en', schema: {}, value: {} },
}

.getScopedSlots() ⇒ object

Gets a Druxt modules scoped slots, and if there's no default slots, provides a develop mode debug default or passes through to a default template.

Kind: instance method of DruxtSite

.getWrapperData(component) ⇒ WrapperData

Get wrapper component data.

Kind: instance method of DruxtSite

.methods

Kind: static property of DruxtSite

.data(vm)

Kind: static method of DruxtSite

Properties

.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 DruxtSite
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 DruxtSite
Returns: string - The current language code.

ComponentOptions : Array.<array>

Provides the available naming options for the Wrapper component.

Kind: global typedef
Example

[
  'DruxtSite[Theme][Langcode]',
  'DruxtSite[Theme]',
  'DruxtSite[Default][Langcode]',
  'DruxtSite[Default]',
]

Example (Umami)

[
  'DruxtSiteUmamiEn',
  'DruxtSiteUmami',
  'DruxtSiteDefaultEn',
  'DruxtSiteDefault',
]

PropsData : object

Provides propsData for use in the Wrapper component.

Kind: global typedef

Example

{
  props: {
    content: {
      name: 'content',
      theme: 'umami',
    },
    ...
  },
  regions: ['breadcrumbs', 'header', 'content', ...],
  theme: 'umami',
}

ScopedSlots : object

Provides scoped slots for use in the Wrapper component.

Kind: global typedef

Example (DruxtSiteTheme.vue)

<template>
  <div>
    <slot name="content" />
    <slot :name="region_name" />
  </div>
</template>

Components : Array.<object>

The list of candidate Wrapper components, with naming parts and global registration state.

Kind: global typedef
Properties

Example

[{
  global: true,
  name: 'DruxtEntityNodeArticleDefault',
  parts: ['NodeArticle', 'Default'],
}]

ComponentData : object

The Wrapper component and propsData to be rendered.

Kind: global typedef
Properties

Example

{
  $attrs: { entity: {}, fields: {}, schema: {} },
  is: 'DruxtEntityNodeArticleDefault',
  options: [
    'DruxtEntityNodeArticleDefault',
    'DruxtEntityDefault',
  ],
  props: { value: {} },
  propsData: {
    entity: {},
    fields: {},
    schema: {},
    value: {},
  },
  settings: { query: {} },
}

WrapperData : object

Druxt settings and registered props retrieved from the Wrapper component.

Kind: global typedef
Properties

Example

{
  druxt: { query: { fields: ['path', 'title'] } },
  props: {
    value: {
      type: Object,
      default: () => ({}),
    }
  }
}