Druxt

The core druxt package is the foundation every other Druxt module builds on. It provides the three pieces the whole framework shares:

• DruxtClient: the Drupal JSON:API communication layer.
• DruxtStore: the Vuex module caching resources and collections for all modules.
• DruxtModule: the base component behind the theme-component suggestion system.

Installation

1. Install the package:

   npm i druxt
   

2. Add the module and your backend URL to nuxt.config.js:

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

   * Replace https://api.umami.demo.druxtjs.org with your own Drupal backend.

3. On the Drupal side, install and enable the Druxt module and grant the access druxt resources permission to the relevant roles. Missing this is the most common cause of site-wide JSON:API failures. See Troubleshooting if requests are failing after install.

Development releases

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

npm i druxt@dev

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

Compatibility

As of September 2026. See the releases for the current version.

What these bounds promise over time is stated in the support and versioning policy.

Translated routes also need a decoupled_router patch; see the multilingual guide.

Settings

See the Nuxt module API for the full options list.

Server cache

In production, the server keeps Drupal's responses between requests for as long as Drupal's Cache-Control header allows: the JSON:API index and menus, and with cache.content every other response. Drupal sets that header from its page cache maximum age, so at the default of 0 nothing is kept.

// nuxt.config.js
export default {
  druxt: {
    cache: { content: true, secret: process.env.DRUXT_CACHE_SECRET },
  },
};

• A request with an Authorization header or a Drupal session cookie skips the cache, and nuxt dev runs without it.
• Only successful responses are kept. A bypassCache dispatch fetches afresh and stores the result.
• A full cache area takes about three times cache.maxSize in server memory, and a response larger than the limit is not kept.
• Clear it with druxt/clearCache, or from Drupal with POST /_druxt/cache/clear and the secret in an X-Druxt-Secret header. Each Nuxt process has its own cache to clear.
• The clear endpoint is server middleware, so list Druxt, or druxt-site, under modules. Nuxt skips buildModules under nuxt start.

The caching guide covers the cache in more depth.

Clearing from Drupal with Purge

With cache.content on, an edit can take up to the page cache maximum age, or cache.ttl if that is shorter, to reach anonymous visitors, unless Drupal clears the cache. The Purge module can send that request on every save. Enable purge, purge_purger_http, purge_queuer_coretags and purge_processor_lateruntime, then add the bundled HTTP purger:

drush p:purger-add httpbundled

Point it at the Nuxt server's host and port, as Drupal reaches it, with the path /_druxt/cache/clear, the method POST, the X-Druxt-Secret header and the invalidation type tag. Set the secret from settings.php as a $config override, not in exported configuration.

DruxtClient

The client is the communication layer between your application and Drupal's JSON:API: resources, collections, indexing and authentication all flow through it.

import { DruxtClient } from 'druxt';

const client = new DruxtClient('https://api.umami.demo.druxtjs.org');
const collection = await client.getCollection('node--article');

• Use the Druxt client directly: practical guide, including non-Nuxt usage.
• DruxtClient API: full method reference.

DruxtStore

The Vuex module that all Druxt modules share: request deduplication, the resource/collection cache, and include handling.

const resource = await this.$store.dispatch('druxt/getResource', {
  type: 'node--article',
  id: 'd8dfd355-7f2f-4fc3-a149-288e4e293bdd',
});

• The DruxtStore concept page: how it works and why it exists.
• DruxtStore API: mutations and actions.
• Deprecations: retired signatures.

DruxtModule

The base component for all Druxt components: it turns a druxt() options object (component suggestions, props, slots) into themeable rendering. Building on it is covered by the custom module tutorial, and the mechanism by Component resolution.

• DruxtModule API.

Where to go next

• New to Druxt? Start with the Getting started tutorial.
• Ready for the full site experience? See the Site module.

Modules

• druxt-blocks - Decoupled Blocks and Regions
• druxt-breadcrumb - Router based Breadcrumbs
• druxt-entity - Decoupled Content entities, forms and fields
• druxt-menu - Decoupled Menus
• druxt-router - Decoupled Router
• druxt-schema - Drupal Display mode schemas
• druxt-site - Out-of-the-box decoupled Drupal Site
• druxt-views - Decoupled Views

• https://demo.druxtjs.org
• https://storybook.umami.demo.druxtjs.org

Support

Druxt is an open-source project, built by the community for the community.

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

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

Contributing

See the Contributing guide.

License

MIT

Note: The contents of this file were automatically generated from the packages/druxt/README.md.