I have a vue 3 app which builds some web components as custom elements. That works fine, I can define an html tag and use it in other apps and in my own vue app. I export the styles with the .ce.vue file ending.
Now I want to use the web components as normal vue components inside my app, but then the styles are not applied anymore. When I remove the custom element tag (the ce.vue. file ending), the vue component looks fine, but the web component loses it's styling.
Is there a way to be able to use a component in both ways, as a vue component and a web component?
Related
I've a small site with just 3 page made you vue3, Vite and Vue Router
On the home compoment I load the three.js library that generate a canvas, I inizialize the canvas in the mounted hooks
The canvas load correctly in the dom at first page load but if I navigate in another page and the turn back to the home it disappear, there is no error in the console
I guess it could be something related to the router but I can't find a way to debug it
I am using Vue 3 components purely as custom elements (in ASP.NET MVC views). When I view my site on localhost, after using vue-cli-service to make a non-prod build of the Vue components (all are .ce.vue), the Vue devtools icon "lights up" (in the browser's extensions icons toolbar) indicating that it detects Vue on the page--however, the Vue tab never appears in the Chrome dev tools.
Should the Vue devtools extension work with just Vue custom elements on a page? I tried the troubleshooting steps in the F.A.Q., but none seem to apply. (I also turned off all other extensions and restarted my browser.)
Note: I am using a 32" 4k monitor, so I am definitely seeing the full Chrome dev tools UI.
Note 2: I have tried using the Vue devtools with my custom element rendered in a shadow DOM and without one.
Without a shadow DOM:
With a shadow DOM
Here is a link to the Vue.js GitHub issue with a helpful comment for the PR for making the shadow DOM wrapper optional.
defineCustomElement without shadowDom #4314
I am trying to register my component as shadowdom in Vue when creating new Vue component from Vue instance you can attach shadowdom but in nuxt i`m confused .
I'm using vue-cli-service to generate web components as
vue-cli-service build --target wc 'components/*.vue'
In order to generate a bundle with all components inside that folder. Until now works very well and I can even mount the components on my page
<script src="https://unpkg.com/vue"></script>
<script src="/dist/bundle.min.js"></script>
<my-component></my-component>
The problem I'm having is that the web component doesn't inherit the styling of the current page.
Imagine I'm working with a bootstrap layout, i would need to import that package within the web component?
Is there any way for me to disable the shadow dom even if for that it sacrifices some functionalities of the wc ? (such as slots, etc. that i'm not going to use)
Currently, there is no way to do this with vue-cli-service.
There is a fork of official Vue Web Component Wrapper here. This fork allows you to disable the shadow DOM but that doesn't support the slots.
However, if you want to use that then you cannot use vue-cli-service. You will have to setup your own build using Webpack or Rollup.
I am using Vuetify only for nested Vue app inside a larger Laravel app. However, the Vuetify.js created stylesheets that effect all the styles from the base level of the app, where all the Laravel and Laravel styles were -- it's overriding them. I am not sure how to 'scope' it since it's the Vuetify.js script that is dynamically creating the stylesheets.