Druxt = DRUpal + nUXT.
Druxt connects a Drupal backend to a Nuxt frontend. Drupal stays the editorial system your authors already know. Nuxt renders the site. 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. druxt-site gives you a whole decoupled site
out of the box, driven by your Drupal display configuration. Or install single
modules and add decoupled routing, entity rendering or menus to a Nuxt project
you already have.
npx giget@1 gh:druxt/quickstart#develop my-druxt-site
cd my-druxt-site
npm run setup
npm run devThat gives you Drupal 11 and Nuxt 2 in one repository, already talking to each
other. npm run setup needs PHP 8.3 or newer and Composer on your PATH, and
stops with an error if either is missing. The backend runs on local PHP and
SQLite, so Docker is not required. The
getting started tutorial walks
the same steps and explains each one.
| Section | What you will find |
|---|---|
| Tutorials | Learn by building: a first site, theming, a login flow, deployment, a custom module |
| How-to guides | Solve one problem: CORS, proxying, multilingual, Storybook, deployment, upgrades |
| Explanation | How it works: routing, schemas, component resolution, request topology |
| Reference | Generated API documentation for every module and component |
Coming from one side of the stack only? Start with Drupal for Nuxt developers or Nuxt for Drupal developers.
| Repository | Role |
|---|---|
| druxt.js | The monorepo. Nine Nuxt modules: druxt, blocks, breadcrumb, entity, menu, router, schema, site, views |
| druxt_drupal | The Drupal module, mirrored from drupal.org/project/druxt |
| druxt-auth | OAuth authentication, versioned separately from the monorepo |
Every one is a GitHub template. Press "Use this template", or use the giget
command above.
| Template | Use it when |
|---|---|
| quickstart | You want the standard pairing: Drupal and Nuxt side by side |
| quickstart-druxt-site-tome | You want content in git and no database, via Tome |
| quickstart-druxt-serverless | You want a fully static build with no live Drupal in production |
| module-template | You are writing your own Druxt module |
| Demo | What it shows |
|---|---|
| demo.druxtjs.org | The framework's own demo site |
| umami.demo.druxtjs.org | Drupal's Umami food magazine, rendered by Druxt, in English and Spanish |
Druxt is not a fork of anything. It builds on modules the Drupal community already maintains, and contributes back to them.
| Module | Why Druxt needs it |
|---|---|
| druxt | Exposes the resources the frontend asks for, and the display configuration behind them |
| decoupled_router | Translates a path into a route, which is what makes decoupled routing possible |
| jsonapi_menu_items | Serves whole menu trees over JSON:API |
| jsonapi_views | Serves Views results over JSON:API |
Simple OAuth pairs with
druxt-auth when you need authenticated users.
github.com/druxt-contrib holds integrations that sit outside the core framework: Layout Builder, Layout Paragraphs and Config Pages.
The npm packages are 0.x and run on Vue 2.7 and Nuxt 2. That is deliberate rather than neglected, and the plan is public:
- 1.0.0 is a stability release for the current stack. Bug fixes, documentation and examples. No new features.
- 2.0.0 is the rewrite: Nuxt 4, Vue 3, TypeScript, and the
@druxtnamespace.
Support and versioning sets out what that means for a site you are building today.
- Discord for questions and conversation
- Issues for bugs and feature requests
- Contributing guide if you want to send a patch
Druxt is built by Stuart Clark, a Drupal and JavaScript engineer in Ballarat, Australia. He writes about decoupled Drupal at stuar.tc and is Deciphered on drupal.org.
MIT licensed.
