DruxtJS

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

Features

• One permission for read-only access to the JSON:API resources Druxt needs.
• The exposed resource list is configurable, behind a separate "administer druxt" permission, with hook_druxt_resources_alter() for modules that know what they need.
• 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.
• Core's jsonapi module, plus Decoupled Router, JSON:API Menu Items and JSON:API Views, which Composer installs with this module.

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.
   
   
5. Review which resources are exposed at /admin/config/services/druxt. The defaults are the set every earlier release exposed, so there is nothing to do here unless a frontend needs more.
   
   

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.