Web component with Vuetify CSS rendering not work

[ScottBreyer96]

3879 # Version

4.1.2

Reproduction link

https://github.com/ScottBreyer96/Vuetify

Environment info

MacOS

Steps to reproduce

Create project vue Create Component "vue-component.vue" with the code in the git depot

Replace main.js by :

import Vue from 'vue' import App from './App.vue' import vuetify from './plugins/vuetify'; import wrap from '@vue/web-component-wrapper'; import "vuetify/dist/vuetify.min.css"; import VueComponent from './components/vue-component'

const CustomElement = wrap(Vue, VueComponent);

Vue.use(vuetify);

new Vue({ vuetify, render: h => h(App) }).$mount('#app') window.customElements.define('vue-component', CustomElement);

Replace App.vue by :

Execute command : vue build --target wc --name my-custom-element ./src/main.js

What is expected?

Working properly with CSS

What is actually happening?

I have not the completely the style

i am currently working on the creation of a web component. I use the command "view build --target wc --name my-custom-element ./src/main.js" to create my web components from Vue components. When I use Vuetify to create a tree or an array of data in a Vue component, there are no problems, but when converting to a Web component, I have problems with the font, display and animation in the tree.

----------------- Treeview in Vue component -----------------

----------------- Treeview in Web component -----------------

----------------- DataTable in Vue component -----------------

----------------- DataTable in Web component -----------------

[atulsourcecode]

I am also facing the issue with vuetify css when using in vue web components. I even added @import '../node_modules/vuetify/dist/vuetify.css' but it doenst helped.Please suggest what to do.Thnx

[ghost]

I have the exact same problem. I tried importing a cdn instead, as suggested in a comment on this post: <style> @import 'cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css'; </style> But it doesn't change anything.

[rajeevverma076]

When I'm trying to publish multiple web components using the vue cli command *vue-cli-service build --target wc --inline-vue --name my-element src/.vue**. it is building perfectly fine but external dependencies like CSS and javascript file is not importing in the build. import 'swiper/css/swiper.css'

Can anyone help me with how to build web components with all external dependencies? import all CSS from node_modules as a dependency.