Skip to content
DruxtJS DruxtJS

Drupal Views components for Druxt with support for filters, pagination and sorting.

DruxtView

View source on GitHub

Modules

DruxtView

The DruxtView component renders Drupal Views using configuration and results provided by the Drupal View and the JSON:API Views module.

The component renders slots for the View's headers, footers, entity results, exposed sorts and filters, and supports contextual filters.

Typedefs

ComponentOptions : Array.<array>

Provides the available component naming options for the Druxt Wrapper.

ModuleSettings : object

Provides settings for the View module, via the nuxt.config.js druxt.views or the Wrapper component druxt object.

PropsData : object

Provides propsData for the DruxtWrapper.

ScopedSlots : object

Provides scoped slots for use in the Wrapper component.

DruxtView

The DruxtView component renders Drupal Views using configuration and results provided by the Drupal View and the JSON:API Views module.

The component renders slots for the View's headers, footers, entity results, exposed sorts and filters, and supports contextual filters.

Example

<DruxtView display-id="block_1" view-id="promoted_items" />

Example (View with contextual filter)

<DruxtView
  :arguments="[entity.attributes.drupal_internal__nid]"
  display-id="block_1"
  view-id="articles_aside"
/>

Example (DruxtView Wrapper component boilerplate)

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

<script>
import { DruxtViewsViewMixin } from 'druxt-views'
export default {
  mixins: [DruxtViewsViewMixin]
}

Example (DruxtView with template injection)

<DruxtView>
  <template #default="{ results }">
    <!-- Do whatever you want here -->
    <DruxtDebug :json="results" />
  </template>
</DruxtView>

.getQuery(settings) ⇒ Query

Builds the query for the JSON:API request.

Kind: instance method of DruxtView

ParamTypeDescription
settingsModuleSettingsThe merged module and component settings object.

.onFiltersUpdate()

Filters update event handler.

Kind: instance method of DruxtView

.props

Vue.js Properties.

Kind: static property of DruxtView

.arguments : array

Views contextual filters.

Kind: static property of props
Default: []
Example

<DruxtView :arguments="[1, 2, 3]" display-id="block_1" view-id="articles_aside" />

.displayId : string

The View Display ID.

Kind: static property of props
Default: "default"
Example

<DruxtView display-id="page_1" view-id="frontpage" />

.settings : ModuleSettings

Module settings object.

Kind: static property of props
Default: {}

.type : string

JSON:API Resource type.

Kind: static property of props
Default: "view--view"

.uuid : string

The View UUID.

Kind: static property of props
Example

<DruxtView uuid="f6c38097-d534-4bfb-87d9-09526fe44e9c" />

.viewId : string

The View ID.

Kind: static property of props
Example

<DruxtView view-id="frontpage" />

.langcode

The resource langcode.

Kind: static property of props
Example

<DruxtView 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

<DruxtView 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

<DruxtView
  :wrapper="{
    component: 'MyWrapper',
    class: 'wrapper',
    propsData: { foo: 'bar' }
  }"
/>

.computed

Kind: static property of DruxtView

.attachments_after : Array.<string>

IDs of displays to be attached after the view.

Kind: static property of computed

.attachments_before : Array.<string>

IDs of displays to be attached before the view.

Kind: static property of computed

.count : integer

The total item count.

Kind: static property of computed

.display : object

The View Display object.

Kind: static property of computed

.filters : Array.<object>

Exposed filters.

Kind: static property of computed

.headers

The View Headers data.

Kind: static property of computed

.mode : string

The View mode for the results entities.

Kind: static property of computed

.pager : object

The displays pager settings.

Kind: static property of computed

.results : Array.<object>

The JSON:API Views results.

Kind: static property of computed

.showPager : boolean

Whether a pager should be shown.

Kind: static property of computed

.showSorts : boolean

Whether Exposed sorts are available and should be displayed.

Kind: static property of computed

.sorts : Array.<object>

Exposed sorts.

Kind: static property of computed

.druxt

DruxtModule settings

Kind: static property of DruxtView

.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

ParamTypeDescription
contextobjectThe module component ViewModel.

.fetchConfig()

Fetch View configuration resource.

Kind: static method of druxt

.fetchData()

Fetch JSON:API Views results.

Kind: static method of druxt

.propsData(context) ⇒ PropsData

Provides propsData for the DruxtWrapper.

Kind: static method of druxt

ParamTypeDescription
contextobjectThe module component ViewModel.

.settings()

Component settings.

Kind: static method of druxt

.slots() ⇒ ScopedSlots

Provides the scoped slots object for the Module render function.

  • header
  • filters
  • sorts
  • attachments_before
  • results
  • pager
  • attachments_after
  • default (all of the above)

Kind: static method of druxt
Returns: ScopedSlots - The Scoped slots object.
Example (DruxtViewViewId.vue)

<template>
  <div>
    <slot name="header" />
    <slot name="results" />
    <slot name="pager" />
  </div>
</template>

.data()

Kind: static method of DruxtView
Properties

NameTypeDescription
modelobjectThe model object.
resourceobjectThe JSON:API Views resource.
viewobjectThe View JSON:API resource.

ComponentOptions : Array.<array>

Provides the available component naming options for the Druxt Wrapper.

Kind: global typedef
Example

[
  'DruxtView[ViewId][DisplayId][Langcode]',
  'DruxtView[ViewId][DisplayId]',
  'DruxtView[ViewId][Langcode]',
  'DruxtView[ViewId]',
  'DruxtView[UUID][DisplayId][Langcode]',
  'DruxtView[UUID][DisplayId]',
  'DruxtView[UUID][Langcode]',
  'DruxtView[UUID]',
  'DruxtView[DisplayId][Langcode]',
  'DruxtView[DisplayId]',
]

Example (featured_articles (default))

[
  'DruxtViewFeaturedArticlesDefaultEn',
  'DruxtViewFeaturedArticlesDefault',
  'DruxtViewFeaturedArticlesEn',
  'DruxtViewFeaturedArticles',
  'DruxtView16f5d68e5bae4d7aa61c6b2bc3b6d3b6DefaultEn',
  'DruxtView16f5d68e5bae4d7aa61c6b2bc3b6d3b6Default',
  'DruxtView16f5d68e5bae4d7aa61c6b2bc3b6d3b6En',
  'DruxtView16f5d68e5bae4d7aa61c6b2bc3b6d3b6',
  'DruxtViewDefaultEn',
  'DruxtViewDefault',
]

ModuleSettings : object

Provides settings for the View module, via the nuxt.config.js druxt.views or the Wrapper component druxt object.

Kind: global typedef

ParamTypeDescription
queryobjectView results query settings:
query.bypassCacheboolean | functionWhether to pull the data from the Vuex store or from the JSON:API.
query.bundleFilterbooleanWhether to automatically detect Resource types to filter, based on the View bundle filter.
query.fieldsArray.<string>An array of fields to filter from the JSON:API Views Resource types.
query.resourceTypesArray.<string>An array of Resource types to be used by the Fields filter.

Example (DruxtView Wrapper component)

<script>
export default {
  druxt: {
    query: {
      bypassCache: ({ $store }) => $store.$auth.loggedIn,
      bundleFilter: false,
      fields: [],
      resourceTypes: ['node--article'],
    },
  },
}

Example (DruxtView component with settings)

<template>
  <DruxtView
    display-id="block_1"
    view-id="promoted_items
    :settings="{
      query: {
        bypassCache: true,
        bundleFilter: false,
        fields: ['title']
        resourceTypes: [],
      }
    }"
  />
</template>

PropsData : object

Provides propsData for the DruxtWrapper.

Kind: global typedef

ParamTypeDescription
countintegerThe total item count.
displayobjectThe View Display object.
modestringThe View mode for the results entities.
pagerobjectThe displays pager settings.
resultsArray.<object>The JSON:API Views results.
viewobjectThe View JSON:API resource.

Example

{
  count: 8,
  display: {},
  mode: 'card',
  pager: {
    options: {},
    type: 'mini',
  },
  results: [],
  view: {},
}

ScopedSlots : object

Provides scoped slots for use in the Wrapper component.

Kind: global typedef

ParamTypeDescription
headerfunctionThe View header.
filtersfunctionThe Exposed filters.
sortsfunctionThe Exposed sorts.
attachments_beforefunctionViews attached before current display.
resultsfunctionThe results as DruxtEntity components, or empty results output.
pagerfunctionThe View pager.
attachments_afterfunctionViews attached after current display.
defaultfunctionAll of the above.

Example

{
  header: () => {},
  filters: () => {},
  sorts: () => {},
  attachments_before: () => {},
  results: () => {},
  pager: () => {},
  attachments_after: () => {},
  default: () => {},
}

Example (DruxtViewViewId.vue)

<template>
  <div>
    <slot name="header" />
    <slot name="results" />
    <slot name="pager" />
  </div>
</template>