TitusDecali
Explore posts from serversWeb components in Nuxt3?
I've scoured the web and can't find any assistance with the best way to create web components with Nuxt3. I am creating an embeddable widget and want to serve it as a self-composed web component within my project.
Can someone please point me in the right direction?
3 replies
Best way to serve an embedded widget?
I have a Nuxt3 app with Tailwind which serves both my site and an embedded widget for my users' sites (imagine something like Intercom for the widget).
I've successfully got it working with an embedded snippet which loads a
widget-loader.js file in the root of my project, which renders the HTML from the page endpoint /api/widget.
This correctly renders the text in the component, but I have two issues:
1. Tailwind styles are not loading within the widget
2. It only works in SSR, and nothing within a <ClientOnly> tag renders in the widget.
This makes sense, as the embedded code snippet is only serving raw HTML of that page route, which is then set to the innerHTML of the embedded widget.
Besides using an iframe, is there a better way to accomplish this?
The only thing I can think of is to embed a Vite/Vue3 microapp, but then I can't manage everything in a single repo (which sounds like a dream).
EDIT: Just saw https://nuxt.com/modules/custom-elements, which sounds like exactly what I need, but doesn't exist yet in Nuxt3.
Perhaps I'm thinking about this all wrong... thoughts?1 replies