Question

我需要在我的nuxt js项目中使用vuetify作为插件。我已经尝试过软件包@nuxtjs/vuetify，但收到错误消息

无法分配为只读对象“＃”的属性“ base”

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

Answer 1

安装vuetify和@ mdi / font

使用以下代码在您的plugins文件夹中创建文件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-保存vuetify

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

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

Vue.use(Vuetify)

修改您的 nuxt.config.js ：

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

Answer 3

我有/有同样的问题。我只是简单地确保使用package.json中明确定义的1.10.3或更低版本

“ @ nuxtjs / vuetify”：“ 1.10.3”，（不带^ 1.10.3）

我还注意到任何与此相关的版本还在每个url请求的末尾添加了一个“未定义” 404。我在Nuxt / CMTY上发帖，但他们的用户基数为零，可以回答任何问题。

Answer 4

此处对此问题进行了讨论：https://github.com/nuxt-community/vuetify-module/issues/268

修复自定义颜色并在外部文件中指定选项似乎会对此产生影响。如果您在选项中指定了颜色，则将primary: colors.blue替换为primary: colors.blue.base。

Answer 5

在初始化 Nuxt 项目时选择 Vuetify 作为你的 UI 框架

在 plugins/vuetify.js 中创建一个新文件

import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)

export default new Vuetify({
    theme: {
        light: true,
        themes: {
            light: {
                primary: colors.blue.darken2,
                accent: colors.grey.darken3,
                secondary: colors.amber.darken3,
                info: colors.teal.lighten1,
                warning: colors.amber.base,
                error: colors.deepOrange.accent4,
                success: colors.green.accent3
            }
        }
    }
})

在 nuxt.config.js 中添加插件配置

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

重启服务器，npm run dev

图片示例： vuetify.js

完成！

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

5 个答案: