-
Notifications
You must be signed in to change notification settings - Fork 47
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
UUI components not working in basic vue app. #831
Comments
@Ellarddekoeijer i did get it working vue: |
@bielu thanks for replying and helping. I personally doubt that this is causing the issue. When I use a uui component that simply extends My colleague Guus has made a stackblitz that reproduces this In conclusion: The uui library is said to be vendor-independant, currently it does not seem to be. Tagging @iOvergaard to make sure this does not fly under the radar. |
I just found out it's an issue since version 1.8.0 (1.8.0-rc.3 is working). This also explains why it is working for @bielu. Here you can find the comparisons: Also I found out it's not just a Vue issue, this happens also in React for example. I think the error logged is also something that might be related to an issue where the (more complex?) uui elements don't conform the CustomElement javascript API. Maybe this issue is overlooked because in Lit the error isn't thrown. @iOvergaard @nielslyngsoe maybe it's something to look into what changed in the 1.8.0 release? It's unfortunate we can't use the UUI components anymore in javascript frameworks, since we want to create extensions (eg. dashboarding for our projects) where we don't want to use Lit, but do want to use the uui component library. |
I was just trying to update from |
@nielslyngsoe @iOvergaard The issue is that the The property setter, as the values differ, then tries to update the element attributes, which causes the error, as adding attributes on an element's constructor is not allowed, per the spec: The issue can be easily reproduced in any Umbraco backoffice instance by just running in the browser console:
Which is what a lot of frameworks are doing under the hood. @nielslyngsoe I didn't really delve too much on the purpose of your original change (#788), but could you take a look? |
Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.
1.8.2
Bug summary
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>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?
FYI: Originally posted on the Umbraco discord server.
Specifics
No response
Steps to reproduce
Expected result / actual result
People should be able to use your lovely uui components inside of front end frameworks that support the use of web components.
The text was updated successfully, but these errors were encountered: