As the title describes, I would like to use The @umbraco-ui/uui web components in a vue app. Vue supports the use of web components, yet I cannot seem to get this to work.
I created a simple vue app using
pnpm create vue@latest
then I follow the steps over at
https://vuejs.org/guide/extras/web-components#using-custom-elements-in-vue. (I can provide my vite config if need be, let me know.)
Then I
pnpm add @umbraco-ui/uui-button
, remove everything from App.vue, render the web component like so:
<script setup lang="ts">
import '@umbraco-ui/uui-button';
</script>
<template>
<div>
<uui-button look="default" color="default" label="Basic">Testing</uui-button>
</div>
</template>
No dice! The error
chunk-2OPG2DWD.js?v=5cdc5437:9659 Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes
is thrown and the element does not work.
As far as my understanding about web components & vue goes; built lit components should work in vue. Am I doing something wrong or does @umbraco-ui not support this?
Before you ask; the reason I want to use @umbraco-ui in vue is because I want to use vue rather than Lit to build a package for Umbraco.
