记录总结Nuxt3搭配Vuetify3的使用, 回忆搭建过程

个人环境

node: v20.9.0
nuxt: ^3.8.0
vuetify: ^3.3.23

目录结构

问题

nuxt创建项目报错

错误

Error: Failed to download template from registry: fetch failed

原因：网络错误，尝试解决方案：https://juejin.cn/post/7154586714416087076。无法解决，后代理改为TUN模式解决安装。

过程

默认已经创建完成Nuxt项目，运行启动

安装Vuetify 3

如需安装最新版使用vuetify@next命令，sass根据需要安装

npm install -D vuetify sass vite-plugin-vuetify

安装图标

• 这个写在前面了，以下代码涉及到了图标的使用，如果不需要安装icon图标，请自行忽略有关图标的代码。

关于图标的文档：https://next.vuetifyjs.com/en/features/icon-fonts/

npm install @mdi/font -D

创建插件

目录：plugins/vuetify.js, 以下文件为完整代码，包含未进行的步骤。
从 Nuxt3 开始，插件中的文件现在是自动导入的

import { createVuetify } from 'vuetify'
import '@mdi/font/css/materialdesignicons.min.css'
export default defineNuxtPlugin((nuxtApp) => {
    const vuetify = createVuetify({
        ssr: true,
        icons: {
            defaultSet: 'mdi'
        },
    })
    nuxtApp.vueApp.use(vuetify)
})

加载样式

目录：assets/main.scss

@use "vuetify/styles";

nuxt.config.ts配置

// https://nuxt.com/docs/api/configuration/nuxt-config
import vuetify, {transformAssetUrls} from "vite-plugin-vuetify";

export default defineNuxtConfig({
  devtools: { enabled: true },
  build: {
    transpile: ['vuetify'],
  },
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
    //...
  ],
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    }
  },
  css: ['@/assets/main.scss']
})

添加layouts页面

目录：layouts/default.vue，全局页面使用theme控制明亮/黑暗模式的切换。

<script setup lang="ts">
import { ref } from 'vue'

const theme = ref('light')

function onClick () {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>

<template>
  <v-app :theme="theme">
    <v-app-bar>
      <v-spacer></v-spacer>

      <v-btn
          :prepend-icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
          @click="onClick"
      >Toggle Theme</v-btn>
    </v-app-bar>

    <v-main>
      <v-container>
        <slot />
      </v-container>
    </v-main>
  </v-app>
</template>

<style lang="scss" scoped>

</style>

创建组件

目录：components/IncrementButton.vue，写了一个按钮用于简单测试

<script setup lang="ts">
const counter = ref(0)

const increment = () => {
  counter.value++
}
</script>

<template>
  <v-btn variant="flat" color="primary" @click="increment">{{ counter }}</v-btn>
</template>

<style scoped>

</style>

创建page页面

目录：pages/index.vue，页面加载了一个组件，展示了一个图标。

<script setup lang="ts">

</script>

<template>
  <increment-button />
  <v-icon icon="mdi-home" />
</template>

<style scoped>

</style>

app.vue

更改app.vue，展示更改的内容。

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

结果如图

end

以上为总结的必要内容，遇到的一些其他坑，不再赘述

参考文章：

1. https://zenn.dev/coedo/articles/nuxt3-vuetify3
2. https://ma-vericks.com/blog/nuxt3-vuetify-vitest/