API Documentation

DruxtModule

druxt

Modules

DruxtModule

Base component for core and custom Druxt modules.

Typedefs

Components : Array.<object>
ComponentData : object
WrapperData : object

DruxtModule

Base component for core and custom Druxt modules.

Example

import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
export default {
  name: 'DruxtTestModule',
  extends: DruxtModule,
  druxt: {
    componentOptions: () => ([['wrapper']]),
    propsData: (ctx) => ({
      bar: ctx.bar,
      foo: ctx.foo,
    }),
  }
}

.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


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

The module value.

Kind: static property of props
Model:


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