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 层和模块钩子：使用 Nuxt 层或通过 vuetify:registerModule Nuxt 模块钩子加载你的 Vuetify 配置
📥 Vuetify 配置文件：使用自定义的 vuetify.config 文件配置你的 Vuetify 选项，无需重启开发服务器
🔥 纯 CSS 图标：不再使用字体/JS 图标，使用新的 unocss-mdi 图标集或使用 UnoCSS 预设图标构建自己的图标
😃 图标字体：配置你想要使用的图标字体，模块将自动使用 CDN 或本地依赖项导入它
🎭 SVG 图标：可以使用 @mdi/js 和 @fortawesome/vue-fontawesome SVG 图标包
📦 多个图标集：注册多个图标集
🌍 支持国际化：安装 @nuxtjs/i18n Nuxt 模块，即可使用 Vuetify 的国际化功能
📆 日期组件：使用 Vuetify 组件需要日期功能的组件，并安装和配置其中一个 @date-io 适配器
💬 自动导入 Vuetify 本地化消息：仅添加要使用的语言环境，即可添加 Vuetify 本地化消息，无需更多导入
⚙️ 自动导入 Vuetify 组合式函数：无需手动导入 Vuetify 组合式函数，它们会自动为你导入
🎨 Vuetify 蓝图：使用 Vuetify 蓝图快速搭建组件
👀 Nuxt 开发工具：使用 Nuxt 开发工具检查器检查你的 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 */
    }
  }
})