How to import and use Vuetify in a Vue Component

January 30, 2022

How can I import and use Vuetify in my Vue component?

Here is some sample code, but it won’t work correctly when rendered. In my example the v-switch does not render.

Vue.component('editable-text', {
  data: function () {
    return {
      switch1: false,
    }
  },
  template: `<h1>Message is: {{ switch1 }}</h1>
    <v-app>
      <v-template>
        <v-switch
          v-model="switch1"
        ></v-switch>
      </v-template>
    </v-app>`,
  mounted() {
  },
})

>Solution :

Try like following snippet:

Vue.component('editable-text', {
  vuetify: new Vuetify(),
  data: function () {
    return {
      switch1: false,
    }
  },
  template: 
  `<div>
     <v-app>
       <h1>Message is: {{ switch1 }}</h1>
       <v-switch v-model="switch1"></v-switch>
     </v-app>
  </div>`,
})

new Vue({
  el: '#app',
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <editable-text></editable-text>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>