Prototype rendering JavaScript components with Nuxt

Created on 23 April 2025, about 1 month ago

Overview

For 📌 First-class experience builder support Active we want to render JavaScript components with Nuxt.

This issue fork is used for prototyping possible solutions with SDCs.

📌 Task
Status

Active

Version

0.0

Component

Page builder

Created by

🇦🇹Austria fago Vienna

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @fago
  • 🇦🇹Austria fago Vienna

    During prototyping I identified the following challenges:
    * CORS issues. When loading static JS from another domain, we need to make Nuxt provide suiting CORS headers
    * Browser JS code cannot use helpers exposed by JS modules like Vue's h(). We could expose needed helpers manually from Nuxt

  • 🇦🇹Austria fago Vienna

    I figured there is another problem: The nuxt entry JS file always auto-mounts the Nuxt app to a the pre-configured DOM element, by default #__nuxt. This is not what we want size we need a custom component + mount target. Thus, I explored the option to extend Nuxt via module, such that it exposes an additional JS entry point / JS chunk along with the needed APIs. Unfortunately, I did not get this working because Nuxt has some nuxt-import protection that disallows importing nuxt directly in JS code, what breaks the custom-entry.

    So how else could it work? We could load each nuxt app in isolation, e.g. via iframes with srcDoc. But given that, I figured having one nuxt-app per preview-components is probably not the best idea resource-wise anyway. It would probably get tot resource hungry when there are ~100+ components on a page. Even worse with so many iframes.

    So I came up with a new idea. Use a single nuxt app + Vue teleports: https://vuejs.org/guide/built-ins/teleport As far as I understand, it should be possible to dynamically create teleports - all from one nuxt app - and use it to render dynamically created preview-Components. Will experiment with that next.

  • 🇦🇹Austria fago Vienna

    Got a working prototype with teleports. This seems to be the way to go! Now I need to brush it up a bit more.
    Need to figure out how to deal with the CORS issue best now. Maybe proxying through assets through the Drupal web-server would be the most convenient.

Production build 0.71.5 2024