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 :

<script> import HelloWorld from './components/HelloWorld'; import VueComponent from './components/vue-component'; export default { name: 'App', components: { HelloWorld, VueComponent }, data: () => ({ // }), }; </script>

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.