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

Question

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

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

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

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 --save 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

完毕！

Answer 6

您可以按顺序执行以下步骤，最后使用 Vuetify 组件：

1-设置验证

yarn add vuetify@next sass

2- 您的package.json现在应该类似于以下内容：

// package.json
   "devDependencies": {
      "nuxt": "3.0.0-rc.1"
    },
   "dependencies": {
      "sass": "^1.51.0",
      "vuetify": "^3.0.0-beta.1"
    }

3- 创建你的 Vuetify 插件

您必须在插件文件夹中创建此文件并将这些代码放入其中。

// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

4- 配置 Nuxt 2 或 3 以使用我们的新插件

在本节中，您应该像这样将这些代码放在nuxt.config.ts文件中

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

5- 最后，为了测试你是否正确完成了这些步骤，你可以在你的代码中使用这个组件来查看 Vuetify 是否安装正确。

<v-btn>Button</v-btn>

提示：如果你已经完成了这些步骤或者你想使用一个新的组件，在很多情况下最好停止并重新启动你的项目一次。