如何在 Nuxt 3 中使用 Vuetify

一起使用最新版本的 Vuetify 和 Nuxt。

安装

如果您还没有 Nuxt 3 项目,请先创建一个。

npx nuxi init nuxt-app

进入全屏模式 退出全屏模式

然后运行cd nuxt-app并运行yarn以确保您的依赖项已安装。

现在我们的 Nuxt 3 项目已经设置好,我们准备好集成 Vuetify。当您在 nuxt 应用程序的根目录中时,运行以下命令来安装 Vuetify 3 及其依赖项 sass。

yarn add vuetify@next sass

进入全屏模式 退出全屏模式

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

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

进入全屏模式 退出全屏模式

创建我们的 Vuetify 插件

我们已经安装了 Vuetify,现在我们需要它来与 Nuxt 对话。我们将通过使用 Nuxt 的插件功能来做到这一点。

创建一个plugins文件夹,然后创建一个名为vuetify.js的文件,并将其放入新创建的 plugins 文件夹中。

然后,在vuetify.js文件中,将以下代码粘贴到其中:

// 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)
})

进入全屏模式 退出全屏模式

在 Vuetify 的解释中,这主要记录在此处中。关键区别在于我们使用nuxtApp.vueApp.use(vuetify)而不是app.use(vuetify)。

配置 Nuxt 3 以使用我们的新插件

我们的最后一点配置发生在我们的nuxt.config.ts文件中。这是我们告诉 Nuxt 如何正确查找和构建 Vuetify 的 sass 的地方。

// 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,
    },
  },
})

进入全屏模式 退出全屏模式

与 Nuxt 3 一起享受 Vuetify

现在一切都应该按预期工作,您现在应该能够在 Nuxt 页面中使用广泛的 Vuetify 组件!

享受!