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>

ComponentData : object

WrapperData : object

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: 'DruxtTestModule',
  extends: DruxtModule,
  druxt: {
    async fetchConfig() {},
    async fetchData(settings) {},
    componentOptions: (context) => ([[context.foo, context.bar, 'default']]),
    propsData: (context) => ({
      foo: context.foo,
      bar: context.bar,
    }),
    slots(h) {
      return {
        default: (attrs) => h('DruxtDebug', ['Hello world'])
      }
    }
  }
}

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

.error()

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

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

Kind: instance method of DruxtModule
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 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: 'MyWrapper',
    class: 'wrapper',
    propsData: { foo: 'bar' }
  }"
/>

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

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

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: '',
    }
  }
}