Open ScottBreyer96 opened 4 years ago
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
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.
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.
3879 # Version
4.1.2
Reproduction link
https://github.com/ScottBreyer96/Vuetify
Environment info
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 -----------------
![Capture d’écran 2020-02-03 à 12 53 03](https://user-images.githubusercontent.com/39304258/73666786-9dd7ca80-46a3-11ea-99f8-d576984f9e2e.png)
----------------- Treeview in Web component -----------------
----------------- DataTable in Vue component -----------------
----------------- DataTable in Web component -----------------