druxt

DruxtJS; A bridge between frameworks.

DruxtJS provides an easy connection between a Drupal JSON:API backend and NuxtJS frontend application.

Links

• Documentation: https://druxtjs.org
• Community Discord server: https://discord.druxtjs.org

Install

$ npm install druxt

Usage

DruxtClient

The DruxtClient is the communication layer between Nuxt and the Drupal JSON:API.

Example:

const { DruxtClient } = require('druxt')

const druxt = new DruxtClient('https://demo-api.druxtjs.org')

druxt.getCollection('node--page').then((res) => {
  ...
})

Get started with the Guide and API Documentation.

Nuxt Module / Plugin

The Nuxt module adds the Vue components, Vuex store and DruxtClient plugin to your Nuxt application.

Add module to nuxt.config.js

module.exports = {
  modules: [
    'druxt'
  ],
  druxt: {
    baseUrl: 'https://demo-api.druxtjs.org'
  }
}

The $druxt plugin gives your Nuxt application access to the DruxtClient.

Example:

<script>
export default {
  data: () => ({ page: null }),

  async fetch() {
    this.page = await this.$druxt.getResource({
      type: 'node--page',
      id: 'd8dfd355-7f2f-4fc3-a149-288e4e293bdd',
    })
  },
}
</script>

The Druxt component

Druxt provides a Vue.js component to easily access Drupal's JSON:API data, with a simple Slot based theming system.

<Druxt :module="module" :props-data="propsData" :wrapper="wrapper" />

Get started with the Guide and API Documentation.

Join the community

DruxtJS is an open source project, built by the comunity for the community.

Find support or get involved in building Druxt via our community channels:

• DruxtJS Discord server
• #druxt Slack channel on Drupal.org slack

Decoupled sites

The DruxtJS Site module provides minimal configuration, decoupled Drupal site functionality.