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

Posted 2023-02-22

【中文标题】如何在 nuxt js 中使用 vuetify 作为插件？

【英文标题】：How to use vuetify in nuxt js as plugin?

【发布时间】：2020-04-23 21:43:53

【问题描述】：

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

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

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

【问题讨论】：

你能解决这个问题吗？我在使用 nuxt 和 vuetify 的项目中遇到了相同的 Cannot assign to read only property 'base' of object '#' 问题。

不，还没有成功。我在nuxtjs + vuetifyjs 上的项目也有这样的问题。 NPM 包@nuxtjs/vuetify 仍然没有在 nuxt cli 上更新

【参考方案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'],
  ...

【参考方案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']
   

【讨论】：

如何编辑 Vuetify 的特定设置，例如你的原色？

【参考方案3】：

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

"@nuxtjs/vuetify": "1.10.3", （不与 ^1.10.3 一起使用）

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

【参考方案4】：

这里有关于这个问题的讨论：https://github.com/nuxt-community/vuetify-module/issues/268

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

【参考方案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

完成！