Vuetify-nuxt-module · Nuxt 模組 - Nuxt 框架

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

適用於 Vuetify 的零組態 Nuxt 模組

🚀 功能

📖 文件和指南
👌 零組態 ：明智的內建預設 Vuetify 設定，適用於常見用例
🔌 可擴充 ：透過 Nuxt 執行時間掛鉤公開自訂 Vuetify 設定的功能
⚡ 完全樹狀可搖動 ：預設只匯入必要的 Vuetify 元件
🛠️ 多功能 ：自訂 Vuetify 指令和實驗室元件註冊
✨ 可設定樣式 ：使用 Vuetify SASS 變數設定你的變數
💥 SSR ：自動 SSR 偵測與設定，包含 HTTP Client 提示
🔩 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 組合式 ：你不需要手動匯入 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 */