# Members

DruxtComponentMixin

Vue.js Mixin to add Druxt component theming to a Druxt module.

# Typedefs

Component : object

# DruxtComponentMixin

Vue.js Mixin to add Druxt component theming to a Druxt module.

Kind: global variable
See: Wrapper theme system
Example (CustomDruxtModule.vue)

<template>
  <component :is="component.is" v-bind="component.propsData">
    <!-- -->
  </component>
</template>

<script>
import { DruxtComponentMixin } from 'druxt'
export default {
  mixins: [DruxtComponentMixin]
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# .data()

Kind: static method of DruxtComponentMixin
Properties

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

# .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 DruxtComponentMixin.fetch() hook.

Kind: static method of DruxtComponentMixin
See: https://nuxtjs.org/api/pages-fetch/ (opens new window)
Example (Manually invoking DruxtComponentMixin.fetch().)

<script>
import { DruxtComponentMixin } from 'druxt'
export default {
  mixins: [DruxtComponentMixin],

  async fetch {
    await DruxtComponentMixin.fetch.call(this)
  }
}
</script>
1
2
3
4
5
6
7
8
9
10

# Component : object

Kind: global typedef
Properties

Name Type Default Description
is string "DruxtWrapper" The rendered component name.
options Array.<string> The possible component name options.
propsData object The component propsData object.

Example

{
  is: 'DruxtTestModuleWrapper',
  options: [
    'DruxtTestModuleWrapper',
  ],
  propsData: {},
}
1
2
3
4
5
6
7