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.

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
  • .props
    • .theme : string
    • .langcode
    • .v-model
    • .wrapper
  • .computed
    • .props ⇒ object
    • .regions ⇒ Array.<string>
  • .druxt
    • .template
    • .componentOptions(context) ⇒ ComponentOptions
    • .fetchConfig()
    • .propsData(context) ⇒ PropsData
    • .slots() ⇒ ScopedSlots

.props

Kind: static property of DruxtSite

• .props
  • .theme : string
  • .langcode
  • .v-model
  • .wrapper

.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: 'MyWrapper',
    class: 'wrapper',
    propsData: { foo: 'bar' }
  }"
/>

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

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>