How do you include vuetify inside web component - vue.js

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

Answer 1

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>

Answer 2

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