Canvas External JavaScript Components

This module adds a new component source plugin to Canvas that allows you
to integrate external JavaScript-rendered components (like Vue, React, or
Nuxt components) into Canvas pages.

The External JavaScript component source works by:

• Storing component metadata (props, slots) within Canvas component configuration entities
• Rendering components using custom JavaScript, either provided as custom Javascript files or loaded via the Custom Elements previews.

Requirements

• Drupal 11.2+
• Canvas module
• Optional: Custom Elements module

Usage options

• JavaScript may be used to render client-side within Drupal, either via custom JavaScript or Custom Elements previews
• Fully decoupled - via Custom Elements and Lupus Decoupled pages are provided via API and can be rendered fully decoupled, with full server-side rendering support (when provided by the frontend framework)

Integrations

• The Custom Elements module provides a pluggable component-preview system that may be used to render components. Atm it comes with support for Nuxt.
• The Custom Elements module supports processing Canvas pages into custom elements, either serialized as markup or JSON. Add Lupus CE Renderer or Lupus Decoupled for getting a full-page API.
• The nuxt-component-preview Nuxt-module takes care of exposing Vue components from Nuxt and generates a component-index that works with this module.
• Lupus Decoupled builds upon the Custom Elements module integration to provide a fully-decoupled setup.

Example frontend

• Nuxt example from DrupalCon Vienna 2025 session