DruxtJS

Druxt = DRUpal + nUXT: fully decoupled Drupal, rendered by Nuxt.

Druxt connects a Drupal backend to a Nuxt frontend. Drupal stays the editorial system your authors know, Nuxt renders the site, and Druxt does the work between them: 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://demo-api.druxtjs.org',
  },
};

Features

• Fully decoupled Drupal, with Nuxt in the frontend.
• Drupal JSON:API client with Vuex caching, supporting nuxt/axios and nuxt/auth.
• 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 ships a dev container (.devcontainer/devcontainer.json) for VS Code, GitHub Codespaces and DevPod, with Node, Yarn and all dependencies installed on first open.

License

MIT