DruxtEntity

DruxtEntity

The DruxtEntity component 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.

See

• /modules/entity
• Component resolution

Example

<DruxtEntity
  type="node--article"
  :uuid="uuid"
  mode="teaser"
/>

Example (DruxtEntity with v-model)

<template>
  <DruxtEntity v-model="model" type="node--article" :uuid="uuid" />
</template>

<script>
export default {
  data: () => ({ model: undefined }),
}
</script>

Example (DruxtEntity Wrapper component boilerplate)

<template>
  <DruxtDebug :json="entity" />
</template>

<script>
import { DruxtEntityMixin } from 'druxt-entity'
export default {
  mixins: [DruxtEntityMixin]
}
</script>

Example (DruxtEntity default slot (template injection))

<DruxtEntity type="" uuid="">
  <template #default="{ entity }">
    <!-- Do whatever you want here -->
    <DruxtDebug :json="entity" />
  </template>
</DruxtEntity>

• DruxtEntity
  • instance
    • .getQuery(settings) ⇒ boolean | object
    • .isEmpty(value) ⇒ boolean
    • .error(err, [context])
    • .getModuleComponents() ⇒ Components
    • .getModulePropsData(wrapperProps) ⇒ object
    • .getScopedSlots() ⇒ object
    • .getWrapperData(component) ⇒ WrapperData
  • static
    • .props
      • .mode : string
      • .settings : ModuleSettings
      • .schemaType : 'view' | 'form'
      • .type : string
      • .uuid : boolean | string
      • .langcode : string
      • .v-model : mixed
      • .wrapper : (boolean | object)
    • .computed
      • .entity ⇒ object
      • .fields ⇒ object
    • .druxt
      • .template
      • .componentOptions(context) ⇒ ComponentOptions
      • .fetchConfig()
      • .fetchData(settings)
      • .propsData(context) ⇒ PropsData
      • .settings(context, wrapperSettings) ⇒ object
      • .slots(h) ⇒ ScopedSlots
    • .data(vm)
    • .methods
    • .fetch()
    • .lang(vm) ⇒ string

.getQuery(settings) ⇒ boolean | object

Builds the query for the JSON:API request.

Kind: instance method of DruxtEntity
Returns: boolean | object - The DrupalJsonApiParams query object.

.isEmpty(value) ⇒ boolean

Checks if an Entity field is empty.

Kind: instance method of DruxtEntity
Returns: boolean - true if the field value is empty.

.error(err, [context])

Sets the component to render a DruxtDebug error message.

Kind: instance method of DruxtEntity

.getModuleComponents() ⇒ Components

Get list of module wrapper components.

Kind: instance method of DruxtEntity

.getModulePropsData(wrapperProps) ⇒ object

Get module propsData via modules druxt.propsData() callback.

Kind: instance method of DruxtEntity

Example

{
  $attrs: { entity: {}, fields: {}, langcode: 'en', schema: {} },
  props: { value: {} },
  propsData: { entity: {}, fields: {}, langcode: 'en', schema: {}, value: {} },
}

.getScopedSlots() ⇒ object

Gets a Druxt modules scoped slots, and if there's no default slots, provides a develop mode debug default or passes through to a default template.

Kind: instance method of DruxtEntity

.getWrapperData(component) ⇒ WrapperData

Get wrapper component data.

Kind: instance method of DruxtEntity

.props

Kind: static property of DruxtEntity

• .props
  • .mode : string
  • .settings : ModuleSettings
  • .schemaType : 'view' | 'form'
  • .type : string
  • .uuid : boolean | string
  • .langcode : string
  • .v-model : mixed
  • .wrapper : (boolean | object)

.mode : string

Drupal display mode.

Kind: static property of props
Default: "default"

.settings : ModuleSettings

Module settings object.

Kind: static property of props
Default: {}

.schemaType : 'view' | 'form'

Drupal display schema type, 'view' or 'form'.

Kind: static property of props

.type : string

JSON:API resource type.

Kind: static property of props

.uuid : boolean | string

Entity UUID.

Kind: static property of props
Default: false

.langcode : string

The resource langcode.

Kind: static property of props
Example

@lang vue
<DruxtEntity langcode="en" />

.v-model : mixed

The Vue.js v-model binding for the module.

Setting a value provides the module data directly, so the Drupal JSON:API fetch is skipped.

Kind: static property of props
Default:
Example

@lang vue
<template>
  <DruxtEntity v-model="model" />
</template>

<script>
export default {
  data: () => ({ model: { foo: 'bar' } })
}
</script>

.wrapper : (boolean | object)

The wrapper component configuration.

Used to set the wrapper component, class, style and propsData.

Kind: static property of props
Default: () => undefined
Example

<DruxtEntity
  :wrapper="{
    component: 'BCard',
    class: 'article-card',
    propsData: { noBody: true }
  }"
/>

.computed

Kind: static property of DruxtEntity

• .computed
  • .entity ⇒ object
  • .fields ⇒ object

.entity ⇒ object

The Entity object.

Kind: static property of computed
Returns: object - A copy of the entity model, containing the JSON:API attributes, relationships and included resource data.

.fields ⇒ object

Entity fields based on Display mode.

Kind: static property of computed
Returns: object - Field objects keyed by field ID, each containing the field's schema, value, errors and relationship status.

.druxt

DruxtModule settings

Kind: static property of DruxtEntity

• .druxt
  • .template
  • .componentOptions(context) ⇒ ComponentOptions
  • .fetchConfig()
  • .fetchData(settings)
  • .propsData(context) ⇒ PropsData
  • .settings(context, wrapperSettings) ⇒ object
  • .slots(h) ⇒ ScopedSlots

.template

Druxt development template tool configuration.

Kind: static property of druxt

.componentOptions(context) ⇒ ComponentOptions

Provides the available component naming options for the Druxt Wrapper.

Kind: static method of druxt

.fetchConfig()

Fetches the Druxt schema object.

Kind: static method of druxt

.fetchData(settings)

Fetches the content entity JSON:API resource.

Kind: static method of druxt

.propsData(context) ⇒ PropsData

Provides propsData for the DruxtWrapper.

Kind: static method of druxt

.settings(context, wrapperSettings) ⇒ object

Component settings.

Kind: static method of druxt
Returns: object - The merged module settings.

.slots(h) ⇒ ScopedSlots

Provides the scoped slots object for the Module render function.

A scoped slot is provided for each field being rendered, as per the current display mode.

Additionally, the default slot will render all fields as per the Drupal display mode configuration.

Kind: static method of druxt
Returns: ScopedSlots - The Scoped slots object.

Example (DruxtEntityResourceType.vue)

<template>
  <div>
    <slot name="content" />
    <slot :name="field_name" />
  </div>
</template>

.data(vm)

Provides the reactive entity model and display schema state.

Kind: static method of DruxtEntity

Properties

.methods

Kind: static property of DruxtEntity

.fetch()

Loads the Druxt module data and applies a wrapper component as required.

Important: If your component has an existing fetch method, you must manually invoke the DruxtModule.fetch() hook.

Kind: static method of DruxtEntity
Example (Manually invoking DruxtModule.fetch().)

import DruxtModule from 'druxt/components/DruxtModule.vue'
export default {
  name: 'DruxtCustomModule',
  extends: DruxtModule,
  async fetch() {
    await DruxtModule.fetch.call(this)
  },
  druxt: {
    componentOptions: () => ([['Default']]),
    propsData: ({ model }) => ({ value: model }),
  }
}

.lang(vm) ⇒ string

The current language code: the langcode prop if set, otherwise the route's langcode metadata.

Used by Druxt modules to fetch the correct resource translation.

Kind: static method of DruxtEntity
Returns: string - The current language code.

ComponentOptions : Array.<array>

Provides the available naming options for the Wrapper component.

Kind: global typedef
See: Component resolution
Example

[
  'DruxtEntity[ResourceType][DisplayMode][SchemaType][Langcode]',
  'DruxtEntity[ResourceType][DisplayMode][SchemaType]',
  'DruxtEntity[EntityType][DisplayMode][SchemaType][Langcode]',
  'DruxtEntity[EntityType][DisplayMode][SchemaType]',
  'DruxtEntity[ResourceType][DisplayMode][Langcode]',
  'DruxtEntity[ResourceType][DisplayMode]',
  'DruxtEntity[EntityType][DisplayMode][Langcode]',
  'DruxtEntity[EntityType][DisplayMode]',
  'DruxtEntity[ResourceType][Langcode]',
  'DruxtEntity[ResourceType]',
  'DruxtEntity[EntityType][Langcode]',
  'DruxtEntity[EntityType]',
  'DruxtEntity[DisplayMode][Langcode]',
  'DruxtEntity[DisplayMode]',
]

Example (Article Node (default))

[
  'DruxtEntityNodeArticleDefaultViewEn',
  'DruxtEntityNodeArticleDefaultView',
  'DruxtEntityNodeDefaultViewEn',
  'DruxtEntityNodeDefaultView',
  'DruxtEntityNodeArticleDefaultEn',
  'DruxtEntityNodeArticleDefault',
  'DruxtEntityNodeDefaultEn',
  'DruxtEntityNodeDefault',
  'DruxtEntityNodeArticleEn',
  'DruxtEntityNodeArticle',
  'DruxtEntityNodeEn',
  'DruxtEntityNode',
  'DruxtEntityDefaultEn',
  'DruxtEntityDefault',
]

ModuleSettings : object

Provides settings for the Entity module, via the nuxt.config.js druxt.entity, the Wrapper component druxt object or the DruxtEntity component settings property.

Kind: global typedef

Example (DruxtEntity Wrapper component)

<script>
export default {
  druxt: {
    query: {
      bypassCache: ({ $store }) => $store.$auth.loggedIn,
      fields: [['title'], ['user--user', ['display_name']]],
      include: ['uid'],
      schema: true,
    },
  },
}
</script>

Example (DruxtEntity component with settings)

<template>
  <DruxtEntity
    type="node--article"
    :uuid="uuid"
    :settings="{
      query: {
        bypassCache: true,
        fields: [['title'], ['user--user', ['display_name']]],
        include: ['uid'],
        schema: true,
      }
    }"
  />
</template>

PropsData : object

Provides property data for use in the Wrapper component.

Kind: global typedef

Example

{
  entity: {
    attributes: {},
    id: '43118086-cca5-4c62-b11e-f1d870050ebd',
    links: {},
    relationships: {},
    type: 'node--article',
  },
  fields: {
    body: {},
    field_media_image: {},
    field_tags: {},
  },
  schema: {
    config: {},
    fields: {},
    groups: {},
    id: 'node--article--default--view',
    resourceType: 'node--article',
  },
  value: {},
}

ScopedSlots : object

Provides scoped slots for use in the Wrapper component.

Kind: global typedef

Example (DruxtEntityResourceType.vue)

<template>
  <div>
    <slot name="content" />
    <slot :name="field_name" />
  </div>
</template>

Inherited type definitions

Inherited from DruxtModule: ComponentData, Components, WrapperData.