Using Umbraco UUI in a Vue app.
# help-with-umbraco
m
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:
Copy code
<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.
Addendum; how would one save the value of a property editor when using Vue? I know in lit there is a public set value and get value, vue does not provide this option. Is there an event I need to call to set the value of a property editor?
The addendum can be ignored as I have figured out how to do this already. Which just leaves the issue of not being able to use most of the UUI components. I have found that some do work. The ones that simply extend LitElement rather than Umbraco classes seem to work fine.
39 Views