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 预设图标构建您自己的图标
• 😃 图标字体：配置您想要使用的 图标字体，模块将自动使用 CDN 或本地依赖项为您导入
• 🎭 SVG 图标：即用型 @mdi/js 和 @fortawesome/vue-fontawesome SVG 图标包
• 📦 多个图标集：注册 多个图标集
• 🌍 国际化支持：安装 @nuxtjs/i18n Nuxt 模块后，即可使用 Vuetify 的 国际化 功能
• 📆 日期组件：安装并配置其中一个 @date-io 适配器，即可使用 需要日期功能 的 Vuetify 组件
• 💬 自动导入 Vuetify 区域设置消息：只需添加您想要使用的区域设置，即可添加 Vuetify 区域设置消息，无需再进行导入
• ⚙️ 自动导入 Vuetify 可组合项：您无需手动导入 Vuetify 可组合项，它们会自动为您导入
• 🎨 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 */
    }
  }
})

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

👀 完整配置

查看 类型。

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

📄 许可证

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