CODEWITHSUNDEEP
vue.jsvuetify.js
ToddT
ToddT

Reputation: 3258

How to import and use Vuetify in a Vue Component

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() {
  },
})

Upvotes: 0

Views: 366

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

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/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <editable-text></editable-text>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Upvotes: 2

Related Questions