javascript - What is the correct way to import Vuetify components individually?

Question

I'm new to Vuetify and it's really hard to me to know how to import only component 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 component 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

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 components 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 components globally or on a per-component basis. Both options will load only the Vuetify components you need, but global registration lets you avoid having to write the import syntax inside each of your components. 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 components into each of your components 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, {
  components: {
    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 component.

---

Per-component registration

Use this if you do want to manually register Vuetify components in each of your components 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 {
  components: {
    VApp,
    VTabs,
    VTab
  }
}