最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin2浏览0评论

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 badges
Add a ment  | 

1 Answer 1

Reset to default 5

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
  }
}
发布评论

评论列表(0)

  1. 暂无评论