vuetify-nuxt-module
vuetify-nuxt-module

Vuetify用のゼロコンフィグNuxtモジュール。
106.3Kダウンロード262スターv0.18.8
userquinuserquin
vuetify-nuxt-module - Zero-config Nuxt Module for Vuetify

Vuetify用のゼロコンフィグNuxtモジュール

NPM version NPM Downloads Docs & Guides
GitHub stars


🚀 機能

  • 📖 ドキュメント & ガイド
  • 👌 ゼロコンフィグ: 一般的なユースケースに対応する、常識的な組み込みのデフォルトVuetify設定
  • 🔌 拡張可能: Nuxt Runtime Hooksを介してVuetify設定をカスタマイズする機能を提供
  • ⚡ 完全なTree Shakable: デフォルトでは、必要なVuetifyコンポーネントのみがインポートされます
  • 🛠️ 多機能: カスタムVuetify ディレクティブとラボコンポーネントの登録
  • ✨ 設定可能なスタイル: Vuetify SASS変数を使用して変数を設定
  • 💥 SSR: HTTP Client hintsを含む、自動SSR検出と設定
  • 🔩 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アイコンパックをすぐに使用可能
  • 📦 複数のアイコンセット: 複数のアイコンセットを登録
  • 🌍 I18n対応: @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

Open in StackBlitz

🦄 使用方法

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-現在 Joaquín Sánchez