DruxtEntity renders Drupal content in Vue. Point the DruxtEntity component at a resource type and UUID and it renders the entity's fields exactly as the Drupal display mode configures them. DruxtEntityForm does the same for forms, with submission and validation handled for you. Drupal keeps deciding what shows where; your Nuxt components decide how it looks.

Features

• Vue.js components:
  • DruxtEntity: Render a Drupal Content Entity by UUID
  • DruxtEntityForm: Render a Drupal Content Entity form
• Druxt settings: Include and filter resource fields
• Druxt Router integration
• @nuxtjs/Storybook integration

Installation

1. Install the package:

   npm i druxt-entity
   

2. Add the module to nuxt.config.js:

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

Vue.js Components

DruxtEntity

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.

<DruxtEntity :type="resourceType" :uuid="uuid" :mode="displayMode" />

• For more details, refer to the DruxtEntity component API documentation.

DruxtEntityForm

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

<DruxtEntityForm
  :type="resourceType"
  :mode="displayMode"
  @error="onError"
  @submit="onSubmit"
  v-model="entity"
/>

• For more details, refer to the DruxtEntityForm component API documentation.

Settings

Entity queries

Entity query settings can be provided to include related resources and filter the returned fields.

• fields: An array of strings, or an array of arrays. Formatted for the Drupal JSON:API Params addFields method, used to filter the returned resource fields.
• include: An array of relationship id's to include in the returned resources.
• schema: Boolean, if true fields will be populated by the Drupal Display schema information.

Example: Wrapper component with Query settings:

<script>
export default {
  druxt: {
    query: {
      fields: ['title', 'path'],
      schema: true,
    },
  },
};
</script>

Example: DruxtEntity with settings property:

<template>
  <DruxtEntity
    :settings="{
      query: {
        include: ['field_media_image', 'field_media_image.field_media_image'],
        fields: [
          ['file--file', ['uri']],
          ['media--image', []],
        ],
      },
    }"
    type="node--recipe"
    :uuid="uuid"
  />
</template>

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

druxt: {
  entity: {
    query: {
      fields: ['path', 'title'], // Apply filter to all Entity queries.
      schema: true, // Filter by display mode field settings.
    },
  },
}

Router support

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

• For more details, see the Druxt Router module.

Storybook

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

• For more details, see the Storybook guide.

Deprecations

The default DruxtField components are deprecated. See the deprecations page for what replaces them.

Options

Druxt Entity options

These options are specific to this module.

Base Druxt options

These options are available to all Druxt modules.

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