Rendering Custom Elements

The Drupal Custom Elements Connector module allows you to render custom elements in your Nuxt.js application fetched from a Drupal backend. Here, we'll cover how to render custom elements using both the markup and JSON formats.

Basics

Generally, each custom element maps to a Vue component, which is automatically picked up when the below steps are followed correctly.

There is one gotcha though: For Vue to find your custom element components, they must be globally registered. Thus, in Nuxt, simply put them into your components/global folder, and they are picked up.

Second, custom elements use kebap-case by default, Vue components use CamelCase. Vue automatically does the conversion, so simply add a Vue component KebapCase.vue for the kebap-case custom element.

Rendering using custom elements markup

Firstly, you need to enable the vue.runtimeCompiler in Nuxt to use custom elements. This will allow us to make a dynamic component with the markup as the template.

// nuxt.config.js
export default {
  vue: {
    runtimeCompiler: true
  }
}

When the template compiler is enabled, simply use Vue slots for custom elements with slots:

<template>
  <div class="my-component-with-a-default-slot">
    <slot name="default"></slot>
  </div>
</template>

Rendering using JSON

When using JSON serialization, the default slot gets put into the content attribute, other named slots simply keep their name.

<template>
  <div class="my-component-with-a-default-slot">
    <component :is="renderCustomElements(page.content)" />
  </div>
</template>

<script setup>
const { renderCustomElements } = useDrupalCe()
</script>