API Documentation
DruxtEntity
Modules
- 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.
Typedefs
- ComponentOptions :
Array.<array>
Provides the available naming options for the Wrapper component.
- ModuleSettings :
object
Provides settings for the Entity module, via the
nuxt.config.js
druxt.entity
, the Wrapper componentdruxt
object or the DruxtEntity componentsettings
property.- PropsData :
object
Provides property data for use in the Wrapper component.
- ScopedSlots :
object
Provides scoped slots for use in the Wrapper component.
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.
Example
<DruxtEntity
type="node--article"
:uuid="uuid"
mode="teaser"
/>
Example (DruxtEntity Wrapper component boilerplate)
<template>
<DruxtDebug :json="entity" />
</template>
<script>
import { DruxtEntityMixin } from 'druxt-entity'
export default {
mixins: [DruxtEntityMixin]
}
Example (DruxtEntity with 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
- .getQuery(settings) ⇒
- static
- instance
boolean
| object
.getQuery(settings) ⇒ Builds the query for the JSON:API request.
Kind: instance method of DruxtEntity
Param | Type | Description |
---|---|---|
settings | ModuleSettings | The merged module and component settings object. |
boolean
.isEmpty(value) ⇒ Checks if an Entity field is empty.
Kind: instance method of DruxtEntity
Param | Type | Description |
---|---|---|
value | * | Field value. |
.props
Kind: static property of DruxtEntity
- .props
- .mode :
string
- .settings :
ModuleSettings
- .schemaType :
'view'
|'form'
- .type :
string
- .uuid :
string
- .langcode
- .v-model
- .wrapper
- .mode :
string
.mode : Drupal display mode.
Kind: static property of props
Default: "default"
ModuleSettings
.settings : Module settings object.
Kind: static property of props
Default: {}
'view'
| 'form'
.schemaType : Drupal display schema type, 'view' or 'form'.
Kind: static property of props
string
.type : JSON:API resource type.
Kind: static property of props
string
.uuid : Entity UUID.
Kind: static property of props
.langcode
The resource langcode.
Kind: static property of props
Example
<DruxtEntity langcode="en" />
.v-model
The module component model value.
Used to bypass the Drupal JSON:API fetch, setting the module data directly.
Kind: static property of props
Example
<DruxtEntity v-model="{ foo: bar }" />
.wrapper
The wrapper component configuration.
Used to set the wrapper component, class, style and propsData.
Kind: static property of props
Example
<DruxtEntity
:wrapper="{
component: 'MyWrapper',
class: 'wrapper',
propsData: { foo: 'bar' }
}"
/>
.computed
Kind: static property of DruxtEntity
object
.entity ⇒ The Entity object.
Kind: static property of computed
Returns: object
- .
object
.fields ⇒ Entity fields based on Display mode.
Kind: static property of computed
.druxt
DruxtModule settings
Kind: static property of DruxtEntity
.template
Druxt development template tool configuration.
Kind: static property of druxt
ComponentOptions
.componentOptions(context) ⇒ Provides the available component naming options for the Druxt Wrapper.
Kind: static method of druxt
Param | Type | Description |
---|---|---|
context | object | The module component ViewModel. |
.fetchConfig()
Fetches the Druxt schema object.
Kind: static method of druxt
.fetchData()
Fetches the content entity JSON:API resource.
Kind: static method of druxt
PropsData
.propsData(context) ⇒ Provides propsData for the DruxtWrapper.
Kind: static method of druxt
Param | Type | Description |
---|---|---|
context | object | The module component ViewModel. |
.settings()
Component settings.
Kind: static method of druxt
ScopedSlots
.slots() ⇒ 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
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()
Kind: static method of DruxtEntity
Properties
Name | Type | Description |
---|---|---|
model | object | The model object. |
schema | object | The DruxtSchema object. |
Array.<array>
ComponentOptions : Provides the available naming options for the Wrapper component.
Kind: global typedef
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',
]
object
ModuleSettings : 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
Param | Type | Description |
---|---|---|
query | object | Entity query settings: |
query.bypassCache | boolean | function | Whether to pull the data from the Vuex store or from the JSON:API. |
query.fields | Array.<string> | Array.<array> | An array or arrays of fields to filter from the JSON:API Resources. |
query.include | Array.<string> | An array of relationships to include alongside the JSON:API Resource. |
query.schema | boolean | Whether to automatically detect fields to filter, per the Display mode. |
Example (DruxtEntity Wrapper component)
<script>
export default {
druxt: {
query: {
bypassCache: ({ $store }) => $store.$auth.loggedIn,
fields: [['title'], ['user--user', ['display_name']]],
include: ['uid']
schema: true,
},
},
}
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>
object
PropsData : Provides property data for use in the Wrapper component.
Kind: global typedef
Param | Type | Description |
---|---|---|
entity | object | The Drupal Entity JSON:API resource data. |
fields | object | Drupal Entity Fields data. |
schema | object | DruxtJS Schema object. |
value | object | The Entity value. |
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: {},
}
object
ScopedSlots : Provides scoped slots for use in the Wrapper component.
Kind: global typedef
Param | Type | Description |
---|---|---|
* | function | Slot per field. |
default | function | All fields per Display mode. |
Example (DruxtEntityResourceType.vue)
<template>
<div>
<slot name="content" />
<slot :name="field_name" />
</div>
</template>