vuetify-nuxt-module

用于 Vuetify 的零配置 Nuxt 模块

🚀 功能

• 📖 文档和指南
• 👌 零配置：针对常见用例提供合理的内置默认 Vuetify 配置
• 🔌 可扩展：通过 Nuxt 运行时钩子 公开自定义 Vuetify 配置的能力
• ⚡ 完全可摇树优化：默认情况下，只导入所需的 Vuetify 组件
• 🛠️ 多功能：自定义 Vuetify 指令 和 实验组件 注册
• ✨ 可配置样式：使用 Vuetify SASS 变量 配置您的变量
• 💥 SSR：自动 SSR 检测和配置，包括 HTTP 客户端提示
• 🔩 Nuxt 层和模块钩子：使用 Nuxt 层 或通过自定义模块使用 vuetify:registerModule Nuxt 模块钩子 加载您的 Vuetify 配置
• 📥 Vuetify 配置文件：使用自定义的 vuetify.config 文件配置您的 Vuetify 选项，无需重新启动开发服务器
• 🔥 纯 CSS 图标：不再使用字体/JS 图标，使用新的 unocss-mdi 图标集或使用 UnoCSS Preset Icons 构建您自己的图标集
• 😃 图标字体：配置您想使用的 图标字体，模块将自动使用 CDN 或本地依赖项为您导入
• 🎭 SVG 图标：即用型 @mdi/js 和 @fortawesome/vue-fontawesome SVG 图标包
• 📦 多个图标集：注册 多个图标集
• 🌍 国际化准备就绪：安装 @nuxtjs/i18n Nuxt 模块，即可使用 Vuetify 国际化 功能
• 📆 日期组件：安装和配置 @date-io 适配器之一，以使用 需要日期功能的 Vuetify 组件
• 💬 自动导入 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 */
    }
  }
})

阅读 📖 文档，获取有关如何配置和使用此模块的完整指南。

👀 完整配置

查看 类型。

虚拟模块可以在 configuration.d.ts 文件中找到。

📄 许可证

MIT 许可证 © 2023-PRESENT Joaquín Sánchez