druxt

DruxtJS; A bridge between frameworks.

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

Links

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

Install

$ npm install druxt

Usage

Drupal JSON:API client

Two methods of communication with the Drupal JSON:API are provided by Druxt, a framework agnostic DruxtClient and the DruxtStore Vuex module, which adds an additional cache layer.

Example:

const { DruxtClient } = require('druxt')
new DruxtClient('https://demo-api.druxtjs.org')
  .getCollection('node--page')
  .then((res) => {
    // Do the thing!
  })

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

Themable modules

Druxt uses a Module and slot-based Wrapper component system, making it easy to render and theme Drupal data.

Find more details in the Guide

Community support

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

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

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

Fully decoupled Drupal sites

The DruxtSite module provides minimal configuration, decoupled Drupal site functionality.

Try out the Umami demo, or checkout the source for the Nuxt.js frontend and the Drupal 9 backend.