How do you include vuetify inside web component

Question

I'm building a web component using the following command :

vue-cli-service build --target wc --name my-element 'src/components/mycomponent.vue'

I would like to use Vuetify inside of this component. How do I add it to mycomponent.vue so that it is scoped inside the component's shadow root?

This component will be dynamically loaded into apps built with other frameworks/styles. I want the web component to be able to use, for example, v-btn, v-layout, etc. within it.

Thank you, Donnie

Pinko

Any updates on this? i'm a facing the same issue and cant get the vuetify styling to work inside of the component. – Cruciform

See my comment below about adding theme. I have to include the cdn to the styles in my component. It was a long time ago, so I don't recall the details. I tried many ways to the load the styles inside shadow and none worked. – Pinko

Thanks! I got it to work by importing the css I needed in the style section (using css loader) – Cruciform

@Cruciform can you share the solution please ?. – Logistician

any solution for vuetify 3 with vite? – Venerate

Answer 1

From v1.3, you can import individual components, A La Carte...

<template>
  <!-- whatever -->
</template>

<script>
import { VBtn, VLayout } from 'vuetify/lib'

export default {
  name: 'MyElement',
  components {
    VBtn,
    VLayout
  },
  // etc
}
</script>

See https://vuetifyjs.com/en/framework/a-la-carte#importing-components

Anselme

Excellent! Thank you Phil! This gets rid of my errors and the Vue components work, but the look and feel is missing. (colors, fonts, etc.). Any idea on how best to get those inside web component also? – Pinko

Got the theme to work inside the component by adding the link tag to component's template and adding the theme's class to the outer container. Not sure if this the best way, but it does work. I tried the stylus stuff, but couldn't get it to work. <v-container class="application theme--light"> <link href="cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> – Pinko

How about adding vuetify inside of composition api and web component? – Antiperspirant

Answer 2

For vuetify 2.x, it requires initialization on Vue instance as follows.

// plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify);

const opts = {};

export default new Vuetify(opts);

// main.js
import Vue from 'vue';
import App from './app.vue';
import vuetify from './plugins/vuetify';

new Vue({
  vuetify,
  render: h => h(App),
}).$mount('#app');

You need to move such initialization into your web component instead.

<template>
  ...
</template>

<script>
import { VBtn, VLayout } from 'vuetify/lib'
import vuetify from '../plugins/vuetify';

export default {
  name: 'MyWebComponent',
  vuetify,
  components: {
    VBtn,
    VLayout
  },
  ...
}
</script>

<style>
  ...
</style>

Suicidal

Were you able to get the Vuetify styles to load with component in shadow dom? The import alone doesn't seem to bring the CSS for me, as mentioned by Donnie above. – Valeda

Hi Noah Stahl, you can try importing vuetify tyle manually, this works for me. <style> @import 'cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css'; </style> – Rubberneck

Any help on the vue 3? – Lithograph

@SathishSundar In my case I had to do @import "vuetify/dist/vuetify.min.css"; because webpack did not recognize the cdn url. Another option, if possible, would be putting the <style> manually and externally.Also, I had actually to use "scoped" to make it work – Tocantins

@Lithograph I kind of made it work by cloning the style tag from document.head under my shadowRoot. – Wives

Answer 3

Vuetify 3 provides the vuetify.min.css which could be injected to the shadow DOM and then everything seems work

@import 'vuetify/dist/vuetify.min.css';

See https://stackblitz.com/github.com/EranGrin/vuetify-web-component-wrapper

Coal