Moon
06/21/2024, 1:50 PMpnpm 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.Moon
06/24/2024, 7:27 AMMoon
07/01/2024, 7:00 AM