[SOLVED] How do you include vuetify inside web component

How do you include vuetify inside web component

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

Solution

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