I'm new to Vuetify and it's really hard to me to know how to import only ponent for using it.

I am using Vuetify 2.4.2

As the documentation they said, but where is path to vuetify export?

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

I use Tabs and elements like this. How can I call ponent from Vuetify for this?

 <v-card>
    <v-tabs show-arrows v-model="tab">
      <v-tabs-slider color="teal"></v-tabs-slider>
      <template v-for="sticker in allStickers">
        <v-tab :key=sticker.id :href="'#tab-'+sticker.id">
          <img :src=sticker.imgurl alt="">
        </v-tab>
      </template>
    </v-tabs>
    <v-tabs-items v-model="tab">
      <template v-for="sticker in allStickers">
        <v-tab-item :key=sticker.id :value="'tab-' + sticker.id">              
          <ul class="liststickers">
            <template v-for="stick in sticker.stickers">
              <li :key=stick.id @click="sendSelectedSticker(stick.id)">
                <img :src=stick.imgurl alt="">
                <p class="stick_price">{{stick.price}}</p>
              </li>
            </template>
          </ul>
        </v-tab-item>
      </template>
    </v-tabs-items>
  </v-card>

Thank you for your support

I'm new to Vuetify and it's really hard to me to know how to import only ponent for using it.

I am using Vuetify 2.4.2

As the documentation they said, but where is path to vuetify export?

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

I use Tabs and elements like this. How can I call ponent from Vuetify for this?

 <v-card>
    <v-tabs show-arrows v-model="tab">
      <v-tabs-slider color="teal"></v-tabs-slider>
      <template v-for="sticker in allStickers">
        <v-tab :key=sticker.id :href="'#tab-'+sticker.id">
          <img :src=sticker.imgurl alt="">
        </v-tab>
      </template>
    </v-tabs>
    <v-tabs-items v-model="tab">
      <template v-for="sticker in allStickers">
        <v-tab-item :key=sticker.id :value="'tab-' + sticker.id">              
          <ul class="liststickers">
            <template v-for="stick in sticker.stickers">
              <li :key=stick.id @click="sendSelectedSticker(stick.id)">
                <img :src=stick.imgurl alt="">
                <p class="stick_price">{{stick.price}}</p>
              </li>
            </template>
          </ul>
        </v-tab-item>
      </template>
    </v-tabs-items>
  </v-card>

Thank you for your support

• javascript
• vue.js
• vuejs2
• vuetify.js
• vue-cli

1 Answer 1

Vue CLI + Vuetify

If you are using Vue CLI and vue add vuetify, then this functionality is already handled by the vuetify-loader and there is nothing you need to do. From the Vuetify Treeshaking docs:

The A la carte system enables you to pick and choose which ponents to import, drastically lowering your build size. New projects created with the Vue CLI plugin have this enabled by default.

Manual Installation

For a manual installation of Vuetify, choose whether you want to register the ponents globally or on a per-ponent basis. Both options will load only the Vuetify ponents you need, but global registration lets you avoid having to write the import syntax inside each of your ponents. Following is an example using <v-tabs> in each setup.

Global registration

Use this if you don't want to have to manually import the selected Vuetify ponents into each of your ponents that uses them.

main.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
  VApp,
  VTabs,
  VTab
} from 'vuetify/lib'

Vue.use(Vuetify, {
  ponents: {
    VApp,
    VTabs,
    VTab
  },
})
const vuetify = new Vuetify({});

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

Now you can use the <v-app>, <v-tabs>, and <v-tab> in any ponent.

Per-ponent registration

Use this if you do want to manually register Vuetify ponents in each of your ponents which uses them.

main.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)
const vuetify = new Vuetify({});

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

App.vue

import { VApp, VTabs, VTab } from 'vuetify/lib'

export default {
  ponents: {
    VApp,
    VTabs,
    VTab
  }
}