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
Share Improve this question edited Jan 13, 2021 at 8:05 Dan 63.1k18 gold badges110 silver badges119 bronze badges asked Jan 12, 2021 at 16:07 Hai TienHai Tien 3,1178 gold badges39 silver badges63 bronze badges1 Answer
Reset to default 5Vue 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
}
}