DruxtJS

Druxt connects a Drupal backend to a Nuxt frontend. Drupal stays the editorial system your authors know, Nuxt renders the site, and Druxt bridges the two: it reads Drupal's JSON:API and turns routes, content entities, menus, blocks and views into Vue components you can theme.

You choose how much of it to use. The druxt-site module gives you a complete decoupled site out of the box, driven by your Drupal display configuration. Or install individual modules and add decoupled routing, entity rendering or menus to an existing Nuxt project.

Try it

Create a working Drupal + Nuxt + Druxt project from the quickstart template:

npx giget@latest gh:druxt/quickstart#develop my-druxt-site
cd my-druxt-site
npm run setup

The getting started tutorial walks through the same steps with explanations. Other starters cover Tome static content and serverless setups.

Or add Druxt to an existing Nuxt 2 project against any Drupal site with JSON:API enabled:

npm i druxt-site

// nuxt.config.js
export default {
  modules: ['druxt-site'],
  druxt: {
    baseUrl: 'https://api.umami.demo.druxtjs.org',
  },
};

Development releases

Every change merged to develop is published under the dev tag:

npm i druxt-site@dev

These are unreleased builds. See development releases before using one.

Features

• Fully decoupled Drupal, with Nuxt in the frontend.
• Drupal JSON:API client with Vuex caching, supporting

• Modular Vue.js component library system.
• Slot and wrapper theming system, driven by Drupal display modes.
• Support for multilingual content.
• API and file proxy.

Modules

| Module | Package | Purpose | | ---------------------------------------------------- | ------------------ | ------------------------------------------ | | Druxt | druxt | The client, store and component foundation | | Blocks | druxt-blocks | Decoupled block and region rendering | | Breadcrumb | druxt-breadcrumb | Router based breadcrumbs | | Entity | druxt-entity | Content entities, forms and fields | | Menu | druxt-menu | Decoupled Drupal menus | | Router | druxt-router | Drupal routes in Nuxt | | Schema | druxt-schema | Display mode schemas | | Site | druxt-site | A decoupled Drupal site out of the box | | Views | druxt-views | Decoupled Drupal Views |

Demo

The Umami food magazine demo renders Drupal's Umami install profile through Druxt, with a Storybook of its components.

Documentation

Everything lives at druxtjs.org: tutorials, how-to guides, module documentation and the full API reference.

Support

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

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

Contributing

Druxt is an open-source project, built by the community for the community. See the Contributing guide for how to get involved.

This repository includes a dev container (.devcontainer/devcontainer.json) for VS Code, GitHub Codespaces and DevPod, with Node, Yarn and all dependencies installed on first open.

MIT