Quasar モジュール（Nuxt 用）

• ✨  リリースノート

機能

• コンポーネント の自動インポート
• ディレクティブ の自動インポート
• @quasar/extras で提供される SVG アイコンセットの自動インポート
• nuxt.config 経由で、使用されるアニメーション、Web フォントとアイコンセット を構成可能
• quasar で使用されるSass/Scss 変数 を構成可能
• Nuxt DevTools サポート

クイックセットアップ

プロジェクトに nuxt-quasar-ui の依存関係を追加します

# Using pnpm
pnpm add quasar @quasar/extras
npx nuxi@latest module add quasar

# Using yarn
yarn add quasar @quasar/extras
npx nuxi@latest module add quasar

# Using npm
npm install quasar @quasar/extras
npx nuxi@latest module add quasar

これだけです！Nuxt アプリで Quasar Nuxt を使用できるようになりました ✨

デモ

StackBlitz

使用法

<template>
  <q-btn color="primary" label="Primary" />
  <QBtn color="secondary" label="Secondary" />
  <LazyQBtn color="amber" glossy label="Amber" />
</template>

// app.config.ts
export default defineAppConfig({
  // Configure Quasar's Vue plugin (with HMR support)
  nuxtQuasar: {
    brand: {
      primary: '#3993DD'
    },
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  quasar: {
    // Configurable Component Defaults
    components: {
      defaults: {
        QBtn: {
          dense: true,
          flat: true,
        },
        QInput: {
          dense: true
        }
      }
    }
  }
})

Playground で詳しい使用法を参照できます

オプション

plugins

• タイプ: string[]
• デフォルト: []

適用する Quasar プラグインのリスト。（Dialog、Notify など）

sassVariables

• タイプ: boolean | string
• デフォルト: false

Quasar Sass/SCSS 変数の使用を有効にします。オプションで、変数を含むファイルを指す文字列を指定できます。

sass のインストールが必要です。

quietSassWarnings

• タイプ: boolean
• デフォルト: false（ただし、quasar のバージョンが 2.13 以下の場合、true）

Quasar は特定のバージョン（1.32.12）の sass にピン留めされており、非推奨の警告が発生します。Nuxt を実行すると、これがコンソールログを汚染します。このオプションを有効にすると、これらの非推奨の警告が非表示になります。

lang

• タイプ: string
• デフォルト: 'en-US'

Quasar コンポーネントで使用されるデフォルトの言語パックです。

iconSet

• タイプ: string | QuasarIconSet
• デフォルト: 'material-icons'

Quasar コンポーネントで使用されるアイコンセットです。また、有効にするには extra.fontIcons に含める必要があります。

cssAddon

• タイプ: boolean
• デフォルト: false

有効にすると、すべてのフレックス（および表示）関連 CSS クラスのブレークポイントに応じたバージョンが提供されます。

注意 有効にすると、CSS のフットプリントが著しく増加します。必要な場合にのみ有効にしてください。

appConfigKey

• タイプ: string
• デフォルト: nuxtQuasar

Quasar プラグインの構成に使用される構成キー。

config

• タイプ: object
• デフォルト

UI関連のプラグインおよびディレクティブ(Dialog、Rippleなど)のデフォルト設定を構成します。このオブジェクトはapp.config.tsからも構成できます。

config.brand

• タイプ: object
• デフォルト

Quasarで使用されるcss変数を変更します。 sassVariablesの代替品です。このオプションは、基本的にはルートレベルで定義された変数を指定したcssファイルを付加します。

extras.font

• タイプ: 'roboto-font' | 'roboto-font-latin-ext' | null
• 既定値: null

@quasar/extrasが必要です。

extras.fontIcons

• タイプ: string[]
• デフォルト: []

@quasar/extrasによって提供されるwebfontアイコンセットをインポートします。

extras.svgIcons

• タイプ: string[]
• デフォルト: []

@quasar/extrasによって提供されるsvgアイコンセットを自動インポートします。

extras.animations

• タイプ: string[] | "all"
• デフォルト: []

@quasar/extrasによって提供されるアニメーションをインポートします。

components.defaults

• タイプ: object
• デフォルト

Quasarコンポーネントのデフォルトのprop値を設定します。関数値を受け入れるpropはサポートしません。

CSSインポートの順序

モジュールは次の順序でcssをインポートします

1. フォント
2. アイコン
3. アニメーション
4. Quasar CSS

cssオプションでこの順序を変更できます。

例

export default defineNuxtConfig({
  css: [
    // ...
    'quasar/fonts',
    'quasar/animations',
    'quasar/icons',
    'quasar/css',
    // ...
  ]
})

注釈

<meta>タグを操作するQuasarプラグインとcomposableの使用を避けます。代わりにuseHeadを使用してください。

この操作を行うことが知られているプラグイン/composableのリスト

• AddressbarColor
• Meta
• useMeta

Quasar 2.15.0では、nuxtも提供するuseId関数とuseHydrate関数が導入されました。これらの関数はnuxtを優先して自動インポートされません。何らかの理由で使用したい場合は、明示的にインポートする必要があります。

開発

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch