Vuetify-nuxt-module

vuetify-nuxt-module - Zero-config Nuxt Module for Vuetify

用于 Vuetify 的零配置 Nuxt 模块

🚀 特性

📖 文档 & 指南
👌 零配置：为常见用例提供明智的内置默认 Vuetify 配置
🔌 可扩展：通过 Nuxt 运行时钩子公开自定义 Vuetify 配置的能力
⚡ 完全可摇树优化：默认情况下，仅导入所需的 Vuetify 组件
🛠️ 多功能：自定义 Vuetify 指令和 labs 组件注册
✨ 可配置样式：使用 Vuetify SASS 变量配置变量
💥 SSR：自动 SSR 检测和配置，包括 HTTP 客户端提示
🔩 Nuxt Layers 和模块钩子：使用 Nuxt Layers 或通过 vuetify:registerModule Nuxt 模块钩子使用自定义模块加载 Vuetify 配置
📥 Vuetify 配置文件：使用自定义 vuetify.config 文件配置 Vuetify 选项，无需重启开发服务器
🔥 纯 CSS 图标：不再需要字体/js 图标，使用新的 unocss-mdi 图标集，或者使用 UnoCSS Preset Icons 构建自己的图标集
😃 图标字体：配置您要使用的图标字体，该模块将使用 CDN 或本地依赖项自动为您导入它
🎭 SVG 图标：可直接使用 @mdi/js 和 @fortawesome/vue-fontawesome SVG 图标包
📦 多图标集：注册多图标集
🌍 I18n 就绪：安装 @nuxtjs/i18n Nuxt 模块，您就可以使用 Vuetify 国际化功能
📆 日期组件：使用需要日期功能的 Vuetify 组件，需要日期功能安装和配置 @date-io 适配器之一
💬 自动导入 Vuetify 语言消息：只需添加您想要使用的语言环境，即可添加 Vuetify 语言消息，无需再进行导入
⚙️ 自动导入 Vuetify Composables：您无需手动导入 Vuetify composables，它们会自动为您导入
🎨 Vuetify 蓝图：使用 Vuetify 蓝图快速构建组件
👀 Nuxt DevTools：可以使用 Nuxt DevTools 检查器查看您的 Vuetify 样式
🦾 类型强：用 TypeScript 编写

📦 安装

需要 Vite，不适用于 Webpack

npx nuxi@latest module add vuetify-nuxt-module

🦄 用法

vuetify-nuxt-module 非常有主见，并且开箱即用地具有内置的默认配置。您可以无需任何配置即可使用它，它适用于大多数用例。

将 vuetify-nuxt-module 模块添加到 nuxt.config.ts 并对其进行配置

// Nuxt config file
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    'vuetify-nuxt-module'
  ],
  vuetify: {
    moduleOptions: {
      /* module specific options */
    },
    vuetifyOptions: {
      /* vuetify options */
    }
  }
})