vuetify-nuxt-module

用於 Vuetify 的零配置 Nuxt 模組。

106.3K 次下載•262 個星標•v0.18.8

userquin

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 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 檔案中找到。

vuetify-nuxt-module

🚀 功能

📦 安裝

🦄 用法

👀 完整配置

📄 許可證