# Druxt.js Schema

The Druxt.js Schema module uses the Drupal (opens new window) JSON:API and Display mode configuration to build a Vuex (opens new window) based Schema store to power your Drupal driven Nuxt.js (opens new window) frontend.

# How it works?

Upon installation the module installs a Nuxt.js plugin, Vuex store and builds the required Entity Form and View schemas.

Schemas are loaded into the Vuex store on-demand through the usage of the provided Nuxt.js plugin, Vue.js mixin or Vuex module.

# Nuxt.js Plugin

The Nuxt.js plugin can be used to load the Schema as per the following example:

const schema = await this.$druxtSchema.import(id)
1

# Vue.js mixin.

The Vue.js mixin will add the required props to a custom Vue.js component, as well as automatically loading in the required Schema via the created() method.

<script>
import { DruxtSchemaMixin } from 'druxt-schema'

export default {
  mixins: [DruxtSchemaMixin]
}
</script>
1
2
3
4
5
6
7

See the Mixin API documentation for more.

# Vuex module.

The Vuex module simplifies loading and caching of the Schema data.

// Load data from store, or import if not available.
const schema = await this.$store.dispatch('druxtSchema/get', schemaConfig)
1
2

See the Vuex store API documentation for more.

Last Updated: 8/10/2020, 11:40:57 PM