Vuetify-nuxt-module

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

Vuetify 的零配置 Nuxt 模組

🚀 功能特色

📖 文件與指南
👌 零配置：針對常見使用案例，提供合理的內建預設 Vuetify 配置
🔌 可擴展：透過 Nuxt Runtime Hooks 暴露自訂 Vuetify 配置的能力
⚡ 完全可 Tree Shaking：預設情況下，僅導入所需的 Vuetify 組件
🛠️ 多功能：自訂 Vuetify 指令和實驗室組件註冊
✨ 可配置樣式：使用 Vuetify SASS 變數配置您的變數
💥 SSR：自動 SSR 偵測和配置，包含 HTTP Client hints
🔩 Nuxt Layers 和模組 Hooks：使用 Nuxt Layers 或透過自訂模組經由 vuetify:registerModule Nuxt Module Hook 載入您的 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 Locale 訊息：僅添加您想要使用的語言環境，即可添加 Vuetify Locale 訊息，不再需要額外導入
⚙️ 自動導入 Vuetify Composables：您無需手動導入 Vuetify composables，它們會自動為您導入
🎨 Vuetify Blueprints：使用 Vuetify Blueprints 快速搭建組件
👀 Nuxt DevTools：準備好使用 Nuxt DevTools 檢查器檢查您的 Vuetify 樣式
🦾 Type Strong：以 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 */
    }
  }
})