API Documentation

DruxtSite

site

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>

.props

Kind: static property of DruxtSite


.theme : string

Drupal theme ID.

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

Kind: static property of props


.computed

Kind: static property of DruxtSite


.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


.componentOptions(context) ⇒ ComponentOptions

Provides the available component naming options for the Druxt Wrapper.

Kind: static method of druxt

ParamTypeDescription
contextobjectThe module component ViewModel.

.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

ParamTypeDescription
contextobjectThe module component ViewModel.

.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

ParamTypeDescription
propsobjectDruxtBlockRegion propsData for regions.
regionsArray.<string>An array of unique region names.
themestringDrupal theme ID.

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

ParamTypeDescription
*functionSlot per region.
defaultfunctionAll regions.

Example (DruxtSiteTheme.vue)

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