Default components

Note: This feature is atm only available when using the (default) JSON-based rendered of custom elements.

Overview

When using JSON-based rendering of custom elements, the module offers fallback component support. If a custom element lacks a corresponding Vue component, the module attempts to find a suitable default component.

Use-case

This feature makes it possible to define a general custom element, e.g. for drupal forms drupal-form--default.vue, which is used to render every custom element drupal-form-* when no specific custom element is available. That way, specific elements provided by Drupal, e.g. drupal-form-user-login-form.vue, have the default applied, while it's easily possible to copy and customize the default component.

The same way it becomes handy to have general default components for content entities, like node--default.vue, paired with element names like node-article-page. That way it's easy to implement a general default component that suits multiple cases, while specific elements can easily be customized.

How it works:

  1. The module removes the last --separated prefix from the element name.
  2. It then appends a --default suffix.
  3. If this modified component exists, it's used for rendering.
  4. If the component is not exiting, the process is repeated.

Example lookup process

When a specific component isn't found, the module searches for a default component by progressively removing segments from the custom element name. For example when rendering the custom element node-custom-view it looks for components in the following order:

x node-custom-view.vue
x node-custom-view--default.vue
x node-custom--default.vue
āœ“ node--default.vue
Table of Contents