DruxtJS

# Modules

DruxtModule

The DruxtModule base Vue.js component.

Extend this component to build a Druxt module.

# Typedefs

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

# DruxtModule

The DruxtModule base Vue.js component.

Extend this component to build a Druxt module.

Example

import { DruxtModule } from 'druxt'
export default {
  name: 'DruxtTestModule',
  extends: DruxtModule,
  druxt: {
    componentOptions: () => ([['wrapper']]),
    propsData: (ctx) => ({
      bar: ctx.bar,
      foo: ctx.foo,
    }),
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

# .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',
}
1
2
3
4

# .getScopedSlots() ⇒ object

Get default scoped slots.

Default output is a JSON.stringify'd result of the modules propsData.

This method should be overridden in a Druxt modules.

Kind: instance method of DruxtModule
Example

js
getScopedSlots() {
  return {
    default: () => this.$createElement('div', ['Hello world'])
  }
}
1
2
3
4
5
6

# .getWrapperData(component) ⇒ WrapperData

Get wrapper component data.

Kind: instance method of DruxtModule

Param Type Description
component string The Wrapper component name.

# .fetch()

The Nuxt Fetch hook.

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'
export default {
  name: 'DruxtTestModule',
  extends: DruxtModule,
  async fetch() {
    await DruxtModule.fetch.call(this)
  }
  druxt: {
    componentOptions: () => ([['wrapper']]),
    propsData: (ctx) => ({
      bar: ctx.bar,
      foo: ctx.foo,
    }),
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# .data()

Kind: static method of DruxtModule
Properties

Name Type Description
component ComponentData The wrapper component and propsData to be rendered.

# Components : Array.<object>

Kind: global typedef
Properties

Name Type Description
global boolean Component global registration state.
name string The component name.
parts Array.<string> The component naming parts.

Example

[{
  global: true,
  pascal: 'DruxtTestModuleWrapper',
  parts: ['Wrapper'],
}]
1
2
3
4
5

# ComponentData : object

Kind: global typedef
Properties

Name Type Default Description
$attrs object propsData not registered by the Wrapper component.
is string "DruxtWrapper" The Wrapper component name.
options Array.<string> The Wrapper component options.
props object propsData registered by the Wrapper component.
propsData object The component propsData object.
settings object Druxt 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 },
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# WrapperData : object

Kind: global typedef
Properties

Name Type Description
druxt object Druxt settings object for use by Druxt module.
props object Registered props oject.

Example

{
  druxt: { fooBar: true },
  props: {
    foo: {
      type: String,
      default: '',
    }
  }
}
1
2
3
4
5
6
7
8
9

← druxt →