DruxtJS

A bridge between frameworks, Drupal in the back, Nuxt.js in the front.

Features

• One permission for read-only access to all JSON:API resources required by Druxt.
• Support for Views routes via the JSON:API Views and Decoupled Router modules.
• Support for Contact form routes via the Decoupled Router module.
• Improved support for menu items via the JSON:API Menu Items module.
• Condition plugin bypass for Block resources.
• Enables Cross-Origin Resource Sharing (CORS) support.
• Ensures EntityViewDisplay configuration is available to the DruxtSchema module.

Requirements

• Drupal 10 or 11. Support for 8 and 9 ended with 1.2.2, and while 12 is declared, Decoupled Router and JSON:API Menu Items do not support it yet.
• Core's jsonapi module, plus Decoupled Router, JSON:API Menu Items and JSON:API Views, which Composer installs with this module.
• Use 1.2.2 or later. Earlier 1.2.x releases fatal against Decoupled Router 2.0.7, and the failure is quiet: the container rebuild dies, Drupal keeps serving the old container, and routes and Views paths stop resolving.

Installation

Druxt requires a Nuxt frontend and a Drupal JSON:API backend. Prepare the Drupal backend covers the module set, JSON:API configuration and the permissions the frontend needs.

Drupal

1. Install Drupal.
2. Download the Drupal Druxt module:
   
   composer require drupal/druxt
3. Install the Druxt module.
   
   
4. Add the "access druxt resources" permission to a user or role.
   
   

Nuxt

1. Install Nuxt and Druxt.
2. Install the Nuxt Druxt Site module:
   
   npm i druxt-site
3. Add the module and configuration to nuxt.config.js:
   

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

The JavaScript side

This module is the Drupal half of Druxt. The frontend is a set of npm packages for Nuxt 2 that turn Drupal's JSON:API into Vue components: routes, content entities, menus, blocks and views, each themeable without forking the framework.

You can take as much or as little as you want. One package gives you a complete decoupled site driven by your Drupal display configuration, and the others add individual pieces to an existing Nuxt project. The current list, with installation instructions for each, is at druxtjs.org/modules.

If Nuxt is new to you, Nuxt for Drupal developers maps it onto the Drupal concepts you already know, and says which parts you can skip.

Community

Druxt development happens in the open. The fastest route for a bug or a feature request is the relevant issue queue:

• This module, the Drupal side: use the issue queue on this project page.
• The Nuxt packages: the druxt.js queue on GitHub

For questions and discussion there is a Discord server at discord.druxtjs.org. It is a small room rather than a busy one, but questions posted there do get answered by the maintainer.

Documentation is at druxtjs.org.