Vuetify-nuxt-module

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

Vuetify 用のゼロ設定 Nuxt モジュール

🚀 機能

📖 ドキュメントとガイド
👌 ゼロ設定：一般的なユースケースに対応した、賢明なビルトインデフォルトの Vuetify 設定
🔌 拡張可能：Nuxt ランタイムフックを介して Vuetify 設定をカスタマイズする機能を提供
⚡ 完全ツリーシェイキング可能：デフォルトでは、必要な Vuetify コンポーネントのみがインポートされます
🛠️ 多用途：カスタム Vuetify ディレクティブおよび labs コンポーネントの登録
✨ 設定可能なスタイル：Vuetify SASS 変数を使用して変数を構成
💥 SSR：HTTP クライアントヒントを含む自動 SSR 検出と設定
🔩 Nuxt レイヤーとモジュールフック：Nuxt レイヤーまたは vuetify:registerModule Nuxt モジュールフックを介したカスタムモジュールを使用して Vuetify 設定をロード
📥 Vuetify 設定ファイル：カスタム vuetify.config ファイルを使用して Vuetify オプションを設定。開発サーバーの再起動は不要
🔥 Pure CSS アイコン：フォント/js アイコンは不要になりました。新しい unocss-mdi アイコンセットを使用するか、UnoCSS Preset Icons で独自のアイコンセットを構築
😃 アイコンフォント：使用したいアイコンフォントを設定すると、モジュールが 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 は強く意見が反映されており、すぐに使用できる組み込みのデフォルト設定があります。設定なしで使用でき、ほとんどのユースケースで機能します。

nuxt.config.ts に vuetify-nuxt-module モジュールを追加して構成します。

// Nuxt config file
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    'vuetify-nuxt-module'
  ],
  vuetify: {
    moduleOptions: {
      /* module specific options */
    },
    vuetifyOptions: {
      /* vuetify options */
    }
  }
})