【问题标题】:import single Vuetify component in Nuxt.js?在 Nuxt.js 中导入单个 Vuetify 组件?
【发布时间】:2021-03-17 03:32:20
【问题描述】:

我在 nuxt.js 中使用 Vuetify。 如何仅在仪表板布局中使用它? 在 nuxt.config.js 中

 modules: [
        //['nuxt-leaflet', { /* module options */}],
        'bootstrap-vue/nuxt',
        '@nuxtjs/axios',
        '@nuxtjs/pwa',
        '@nuxtjs/auth',
        '@nuxtjs/toast',
        ['@nuxtjs/vuetify', {rtl: true}],
        // 'nuxt-i18n',
    ],

【问题讨论】:

    标签: javascript vue.js nuxt.js vuetify.js


    【解决方案1】:

    您是否将vuetify-loadertree-shaking 一起使用?如果是这样,您可以将特定的 vuetify 组件导入特定的 .vue 组件:

    import { VTextField } from 'vuetify/lib';
    

    并添加:

    components: { VTextField }
    

    根据@nuxtjs/vuetify 模块文档,如果您使用treeShake option,默认情况下,您的 Nuxt.js 应用将仅使用所需的 vuetify 组件,并且包大小不会增加。

    使用vuetify-loader 启用自动tree-shaking。默认情况下仅对生产启用。

    另一件事,如果您使用的是Nuxt >= 2.9.0,请改用 buildModules 部分:

    {
      buildModules: [
        // Simple usage
        '@nuxtjs/vuetify',
    
        // With options
        ['@nuxtjs/vuetify', { /* module options */ }]
      ]
    }
    

    【讨论】:

    • 好的。但风格会改变。 vuetify/style/src/_reset.scss 。和引导冲突
    • 请尝试从 'vuetify/lib' 导入 {VTextField} 并添加组件:{ VTextField }
    【解决方案2】:

    如果您使用的是NuxtJS Vuetify Module(您似乎是),我假设您的package.json 没有列出vuetify,因为导入它的是@nuxtjs/vuetify。因此,您不能仅使用模块名称来导入它。我建议你用它的完整路径导入它,如下所示:

    import { VCard } from '~/node_modules/vuetify/lib';
    

    然后注册组件,当然。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-12-14
      • 2021-03-15
      • 1970-01-01
      • 2021-05-12
      • 2021-04-17
      • 1970-01-01
      • 2018-12-02
      • 2021-06-25
      相关资源
      最近更新 更多