如何在nuxt js中使用vuetify作为插件？

Question

我需要在我的 nuxt js 项目中使用 vuetify 作为插件。我试过包@nuxtjs/vuetify但得到错误

无法分配给对象“#”的只读属性“base”

我已经在本地服务器和共享主机上从官方代码和盒子在线游乐场安装了我的 nuxt 项目。我一直都遇到同样的错误。我尝试使用npm和安装节点模块yarn。如何使用 npm 包vuetify将新的 vuetify 版本作为插件添加到最新版本的 nuxt js 中？

Answer 1

安装 vuetify 和 @mdi/font

使用以下代码在插件文件夹中创建文件 vuetify.js：

import Vue from 'vue'
import Vuetify from 'vuetify'

import colors from './../config/colors'

import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify)

export default ctx => {
  const vuetify = new Vuetify({
    theme: {
      themes: {
        light: {
          ...colors
        },
        dark: {
          // colors
        }
      }
    }
  })
  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}

通过将 vuetify 添加到插件来编辑 nuxt.config.js 文件，如下所示

{
  ...
  plugins: ['~plugins/vuetify.js'],
  ...
}

Answer 2

我通过以下方式实现了这一目标：

npm install --save vuetify

使用以下代码在插件文件夹中创建文件vuetify.js ：

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

修改你的nuxt.config.js：

   plugins: ['~plugins/vuetify.js'],
   build: {
     vendor: ['vuetify']
   }