CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.jsweb-component
shaked
shaked

Reputation: 642

Vuetify build as Web component style not showing

I am building an app using Vue and Vuetify with Web component; when I added Vuetify as a web component, the CSS style Vuetify has disappeared. I tried adding to the demo.html file the <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css"> but this did not help. My repo is vuetify as web component. I have in my vue.config.js transpileDependencies: [ 'vuetify' ] but this did not help also. I need to note the Vuetify styles not working. I tried the following pages.

  1. v-aoutocomplete not working with wc
  2. Vuetify: external page CSS breaks Vuetify's component style
  3. Custom Web Component image not showing

In my repo, you can see in the readme.MD file steps and reproduces and the option I tried. I Will be happy to hear how to include the vuetify styles in WC

Upvotes: 5

Views: 2449

Answers (1)

Fima Taf
Fima Taf

Reputation: 977

What is the problem?

When vue-cli is building a webcomponent it ignores main.js and uses entry-wc.js instead as the official doc says: When building a Webcomponent or Library, the entry point is not main.js, but an entry-wc.js file....
By default vue-cli already has this entry file, and it uses src/App.vue as the entry component which means that if you importing vuetify into App.vue all vuetify's components won't be rendered there, they will be rendered 1 level below (all your components that being imported into App.vue).

Solution 1

Remove all vuetify's components from App.vue and move them 1 level lower.

<template>
  <HelloWorld/> <!-- v-app / v-main / v-btn go inside HelloWorld -->
</template>

<script>
import vuetify from '@/plugins/vuetify'
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',
  vuetify,
  components: {
    HelloWorld,
  },
};
</script>

<style> 
  @import 'https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css';
</style>

Solution 2

Leave vuetify's components inside App.vue (remove import vuetify... + <style> @Import...).
Create a 'wrapping' component (e.g. Wrap.vue), import vuetify and its styles into this component, and import App.vue. Add to the CLI command the new component name:

...
"wcin": "vue-cli-service build --target wc --inline-vue --name my-element 'src/Wrap.vue'"
...

Upvotes: 3

Related Questions