Drupal Display Mode powered Entity, Form and Field Druxt components.

Example DruxtEntity component


  • Vue.js components:
    • DruxtEntity: Render a Drupal Content Entity by UUID
    • DruxtEntityForm: Render a Drupal Content Entity form
  • Druxt settings: Filter JSON:API fields
  • Druxt Router integration
  • @nuxtjs/Storybook integration


  1. Download the module:

    npm i druxt-entity
  2. Add the module to nuxt.config.js:

    export default {
      modules: ['druxt-entity'],

Vue.js Components


Renders a Drupal Content Entity by JSON:API resource type, UUID, view mode and schema type.

Fields are rendered as DruxtField components, based on the Drupal display mode configuration.



Renders a Drupal Content Entity form with submission and validation support.


Example DruxtEntityForm component


Reducing Entity data

The default behaviour of the Entity module is to retrieve all available fields from the JSON:API.

This behaviour is configurable using the modules query option, allowing for both manually filtered fields, automatically filtered fields using the Display mode schema, and a combination of the two as required.

The default behaviour can be set via nuxt.config.js:

druxt: {
  entity: {
    query: {
      fields: ['path', 'title'],
      schema: true,

Alternatively, the behaviour can be set directly on an Entity Wrapper component:

export default {
  druxt: {
    query: {
      fields: ['title'],
      schema: false,

Router support

The DruxtEntity module provides a DruxtRouterEntity component that is used by the Druxt Router module to render a Content Entity route.


DruxtEntity provides zero-config, auto generated Storybook integration with a live data connnection to your Druxt backend.