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)

Related modules

• The Custom Elements module provides a pluggable component-preview system that may be used to render components. Atm it comes with support for Nuxt. When paired with Lupus CE Renderer provides a full-page API for Canvas pages.
• Lupus Decoupled builds upon the Custom Elements and Lupus CE Renderer modules to provide an easy to use setup with fully-decoupled frontend rendering.

Useful frontend packages

• fullfatthings/drupal-canvas-react helps exposing React components to Canvas and generates a component-index.json file to use with this module.
• The nuxt-component-preview Nuxt-module exposes Vue components to Canvas and generates a component-index.json file to use with this module.

Example frontend

• Nuxt example from DrupalCon Vienna 2025 session