API Documentation

DruxtSite

site

Modules

DruxtSite

Renders all available block regions based on the specified theme.

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

Renders all available block regions based on the specified theme.

See: DruxtBlockRegion
Example

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

Example (Default slot override)

<template>
  <DruxtSite theme="umami">
    <template #default="{ props, regions, theme }">
      <DruxtBlockRegion
        v-for="region of regions"
        :key="region"
        v-bind="props[region]"
      />
    </template>
  </DruxtSite>
</template>

Example (Wrapper component)

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

.props

Vue.js Properties.

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

Vue.js Computed properties.

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.

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

.fetch()

Nuxt.js fetch method.

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

Kind: static method of DruxtSite


ComponentOptions : Array.<array>

Provides the available naming options for the Wrapper component.

Kind: global typedef
Example

[
  'DruxtSite[Theme]',
  'DruxtSiteDefault',
]

Example (Umami)

[
  'DruxtSiteUmami',
]

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>