API Documentation

DruxtModule

druxt

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'])
      }
    }
  }
}

.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

ParamTypeDescription
componentstringThe Wrapper component name.

.props

Kind: static property of DruxtModule


.langcode

The resource langcode.

Kind: static property of props


.value : Array | Boolean | Date | Number | Object | String

The module value.

Kind: static property of props
Model:


.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' }
  }"
/>

.methods

Kind: static property of DruxtModule


.data()

Kind: static method of DruxtModule
Properties

NameTypeDescription
componentComponentDataThe wrapper component and propsData to be rendered.
modelobjectThe model object.

.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

NameTypeDescription
globalbooleanComponent global registration state.
namestringThe component name.
partsArray.<string>The component naming parts.

Example

[{
  global: true,
  pascal: 'DruxtTestModuleWrapper',
  parts: ['Wrapper'],
}]

ComponentData : object

Kind: global typedef
Properties

NameTypeDefaultDescription
$attrsobjectpropsData not registered by the Wrapper component.
isstring"DruxtWrapper"The Wrapper component name.
optionsArray.<string>The Wrapper component options.
propsobjectpropsData registered by the Wrapper component.
propsDataobjectThe component propsData object.
settingsobjectDruxt settings object provided by the Wrapper component.

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

NameTypeDescription
druxtobjectDruxt settings object for use by Druxt module.
propsobjectRegistered props oject.

Example

{
  druxt: { fooBar: true },
  props: {
    foo: {
      type: String,
      default: '',
    }
  }
}