Modules

DruxtModule

The DruxtModule component is used to make a Druxt module, simply import and extend the component to get started.

The component provides access to the Druxt Wrapper theming and fetch system via the druxt settings object.

Typedefs

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.

DruxtModule

The DruxtModule component is used to make a Druxt module, simply import and extend the component to get started.

The component provides access to the Druxt Wrapper theming and fetch system via the druxt settings object.

Example

import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
export default {
  name: 'DruxtCustomModule',
  extends: DruxtModule,
  druxt: {
    async fetchConfig() {},
    async fetchData(settings) {},
    componentOptions: () => ([['Default']]),
    propsData: ({ model }) => ({ value: model }),
    slots(h) {
      return {
        default: (attrs) => h('div', { attrs }, [this.model])
      }
    }
  }
}

• DruxtModule
  • instance
    • .error(err, [context])
    • .getModuleComponents() ⇒ Components
    • .getModulePropsData(wrapperProps) ⇒ object
    • .getScopedSlots() ⇒ object
    • .getWrapperData(component) ⇒ WrapperData
  • static
    • .props
      • .langcode : string
      • .value : *
      • .wrapper : boolean | object
      • .v-model
    • .methods
    • .data(vm)
    • .fetch()

.error(err, [context])

Sets the component to render a DruxtDebug error message.

Kind: instance method of DruxtModule

.getModuleComponents() ⇒ Components

Get list of module wrapper components.

Kind: instance method of DruxtModule

.getModulePropsData(wrapperProps) ⇒ object

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

Kind: instance method of DruxtModule

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 DruxtModule

.getWrapperData(component) ⇒ WrapperData

Get wrapper component data.

Kind: instance method of DruxtModule

.props

Kind: static property of DruxtModule

• .props
  • .langcode : string
  • .value : *
  • .wrapper : boolean | object
  • .v-model

.langcode : string

The resource langcode.

Kind: static property of props
Example

<DruxtModule langcode="en" />

.value : *

The module component model value.

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

Kind: static property of props
Model:
Example

<DruxtModule 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
Example

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

.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

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

.methods

Kind: static property of DruxtModule

.data(vm)

Kind: static method of DruxtModule

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 DruxtModule
Example (Manually invoking DruxtModule.fetch().)

import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
export default {
  name: 'DruxtCustomModule',
  extends: DruxtModule,
  async fetch() {
    await DruxtModule.fetch.call(this)
  }
  druxt: {
    componentOptions: () => ([['Default']]),
    propsData: ({ model }) => ({ value: model }),
  }
}

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: () => ({}),
    }
  }
}