Vuetify-nuxt-module

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

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 图标包
📦 多图标集：注册多图标集
🌍 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 */
    }
  }
})