CODEWITHSUNDEEP
vue.jsvuetify.jsvue-cli-3
Donnie Kerr
Donnie Kerr

Reputation: 374

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

Upvotes: 8

Views: 8889

Answers (3)

EranGrin
EranGrin

Reputation: 930

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

Upvotes: 0

Junx
Junx

Reputation: 414

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>

Upvotes: 15

Phil
Phil

Reputation: 164733

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

Upvotes: 5

Related Questions