Skip to content
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

Open
Ellarddekoeijer opened this issue Jun 28, 2024 · 4 comments
Open

UUI components not working in basic vue app. #831

Ellarddekoeijer opened this issue Jun 28, 2024 · 4 comments
Labels
bug Something isn't working needs triage This issue has not been tested by a team member yet

Comments

@Ellarddekoeijer
Copy link

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>
Testing

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

  1. Create a basic vue app using pnpm create vue@latest
  2. Add uui package pnpm add @umbraco-ui/uui-button
  3. Tell vue to not handle uui web web components by changing vite config:
plugins: [
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => tag.startsWith('uui')
                }
            }
        })
    ],
  1. Render the button in App.vue:
<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>
  1. Run the app using pnpm dev. Go to the url vite spits out.

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.

@Ellarddekoeijer Ellarddekoeijer added bug Something isn't working needs triage This issue has not been tested by a team member yet labels Jun 28, 2024
@bielu
Copy link

bielu commented Jul 24, 2024

@Ellarddekoeijer i did get it working vue:
https://github.com/bielu/bielu.Umbraco.Cdn/tree/master/src/bielu.cdn.ui
i think you missunderstood this bit:
isCustomElement: (tag) => tag.startsWith('uui')
as that means uui is custom element prefix in vue and should be compiled to custom element ;) as my CE is prefixed with umbraco so i used it to make sure my component is compiled to CE.

@Ellarddekoeijer
Copy link
Author

@bielu thanks for replying and helping. I personally doubt that this is causing the issue.

When I use a uui component that simply extends LitElement everything seems to work just fine. However, once I try to use a uui component that extends something like UUIFormControlMixin this error occurs. Which makes me belief that the error is in fact caused by the uui library.

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.

@GuusPlx
Copy link

GuusPlx commented Sep 11, 2024

@bielu @Ellarddekoeijer

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:
uui 1.7.2 in a Vue app works
uui 1.8.0 in a Vue app doesn't work

Also I found out it's not just a Vue issue, this happens also in React for example.
uui 1.7.2 in a React app works
uui 1.8.0+ in a React app doesn't work

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.

@lauraneto
Copy link
Contributor

I was just trying to update from 1.7.0 to 1.11.0 and am facing the same issue.
In my case I am using the UI library loaded as a script (using jsDelivr) in a blazor dashboard.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs triage This issue has not been tested by a team member yet
Projects
None yet
Development

No branches or pull requests

4 participants