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.

All regions are provided as scoped slots 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>

ComponentData : object

WrapperData : object

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.

All regions are provided as scoped slots 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 : string
      • .v-model : mixed
      • .wrapper : (boolean | object)
      • .props ⇒ object
      • .regions : Array.<string>
    • .computed
      • .props ⇒ object
      • .regions ⇒ Array.<string>
    • .druxt
      • .template
      • .componentOptions(context) ⇒ ComponentOptions
      • .fetchConfig()
      • .propsData(context) ⇒ PropsData
      • .slots() ⇒ ScopedSlots
  • instance
    • .error()
    • .getModuleComponents() ⇒ Components
    • .getModulePropsData() ⇒ object
    • .getScopedSlots() ⇒ object
    • .getWrapperData(component) ⇒ WrapperData
  • static
    • .methods
    • .data()
    • .fetch()
    • .lang() ⇒ string

.props

Kind: static property of DruxtSite

• .props
  • .theme : string
  • .langcode : string
  • .v-model : mixed
  • .wrapper : (boolean | object)
  • .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 : string

The resource langcode.

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

<DruxtSite langcode="en" />

.v-model : mixed

The module component model value.

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

Kind: static property of props
Default: null
Example

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

.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

<DruxtSite
  :wrapper="{
    component: 'MyWrapper',
    class: 'wrapper',
    propsData: { foo: 'bar' }
  }"
/>

.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() ⇒ 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() ⇒ 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()

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() ⇒ object

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

Kind: instance method of DruxtSite
Example

{
  bar: 'foo',
  foo: 'bar',
}

.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()

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/dist/components/DruxtModule.vue'
export default {
  name: 'DruxtTestModule',
  extends: DruxtModule,
  async fetch() {
    await DruxtModule.fetch.call(this)
  }
  druxt: {
    componentOptions: () => ([['wrapper']]),
    propsData: (ctx) => ({
      bar: ctx.bar,
      foo: ctx.foo,
    }),
  }
}

.lang() ⇒ 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>

Kind: global typedef
Properties

Example

[{
  global: true,
  pascal: 'DruxtTestModuleWrapper',
  parts: ['Wrapper'],
}]

ComponentData : object

Kind: global typedef
Properties

Example

{
  $attrs: { bar: 'foo' },
  is: 'DruxtTestModuleWrapper',
  options: [
    'DruxtTestModuleWrapper',
  ],
  props: { foo: 'bar' },
  propsData: {
    bar: 'foo',
    foo: 'bar',
  },
  settings: { fooBar: true },
}

WrapperData : object

Kind: global typedef
Properties

Example

{
  druxt: { fooBar: true },
  props: {
    foo: {
      type: String,
      default: '',
    }
  }
}