quasar
nuxt-quasar-ui

高性能で高品質な Vue.js 3 ユーザーインターフェースを短時間で簡単に構築
2.3万ダウンロード175スターv2.1.13
MaiquuMaiquu

Quasar Framework logo

Quasar モジュール for Nuxt

npm versionnpm downloadsLicense

機能

クイックセットアップ

プロジェクトに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

有効にすると、すべてのflex（およびdisplay）関連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が提供するウェブフォントアイコンセットをインポートします。

extras.svgIcons

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

@quasar/extrasが提供するSVGアイコンセットを自動インポートします。

extras.animations

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

@quasar/extrasが提供するアニメーションをインポートします。

components.autoImport

  • 型: boolean
  • デフォルト: true

quasarコンポーネントを自動インポートします

components.defaults

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

quasarコンポーネントのデフォルトプロパティ値を設定します。関数値を受け入れるプロパティはサポートしていません。

CSSインポート順序

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

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

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

例

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

注記

<meta>タグを操作するquasarプラグインやコンポーザブルの使用は避けてください。代わりにuseHeadを使用してください。

これを行うことが知られているプラグイン/コンポーザブルのリスト

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