quasar-skilld

Quasar [email protected]

単一のコードベースから SPA、PWA、SSR、SSG、モバイル（Cordova/Capacitor）、デスクトップ（Electron）アプリを構築できる Vue 3 UI フレームワークです。Vue 3 専用です。ESM パッケージで、Node >= 22 を必要とします（package.json:102-104）。この Skill の基準バージョンは quasar 2.33.1（2026-09-22）です。

まず、インストール済みパッケージに同梱されているドキュメントを読みます

Quasar 2.33+ にはドキュメントがオフラインで同梱されています。API を推測する前に、プロジェクトの node_modules/quasar を確認してください。

• dist/api/<Name>.json — すべてのコンポーネント、プラグイン、ディレクティブの props、スロット、イベント、メソッドが、addedIn バージョンマーカーとともに記載されています。これが信頼できる情報源です。
• dist/mcp/**/*.md — quasar.dev のページ（コンポーネント、プラグイン、ディレクティブ、コンポーザブル、ユーティリティ、スタイリング、レイアウト）が Markdown 形式で格納されています。dist/mcp/api/<Name>.md には同じ API が簡潔で読みやすい形式で記載されています。dist/mcp/meta.json（160 ページ、version: 2.33.1）にすべてのインデックスがあります。
• @quasar/mcp MCP サーバーは、MCP 対応エージェントに同じドキュメントを提供します。

詳細と検索コマンド：references/offline-docs.md

パッケージの構成

エントリ	パス	備考
ブラウザー ESM	dist/quasar.client.js	デフォルトの import 対象
Node/サーバー	dist/quasar.server.prod.js	Vite プラグインなしで Node/Vitest が解決するファイル
UMD	dist/quasar.umd.prod.js	Vue 3 のグローバルビルドと組み合わせる CDN 用
型定義	dist/types/index.d.ts
ラッパー	wrappers/index.js	no-op の型定義で非推奨です。#q-app/wrappers を使用してください（wrappers/index.js:9-16）
言語パック	lang/*.js (75)	import langDe from 'quasar/lang/de'
アイコンセット	icon-set/*.js (44)	import iconSet from 'quasar/icon-set/material-icons'

すべてのエクスポート（コンポーネント、プラグイン、ディレクティブ、コンポーザブル、ユーティリティ）： references/api-surface.md

よくあるタスク

Vite プラグインを使ってインストールします（@quasar/vite-plugin v2 には Vite 8+、 @vitejs/plugin-vue 6+、quasar v2.24+、Node 20.19+ が必要です。ESM 専用です。 dist/mcp/start/vite-plugin.md:10）：

// main.js
import { createApp } from 'vue'
import { Quasar, Notify } from 'quasar'
import '@quasar/extras/material-icons/material-icons.css'
import 'quasar/src/css/index.sass'
import App from './App.vue'

createApp(App).use(Quasar, { plugins: { Notify } }).mount('#app')

// vite.config.js
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import vue from '@vitejs/plugin-vue'

plugins: [vue({ template: { transformAssetUrls } }), quasar()]

Composition API で $q にアクセスします。

import { useQuasar } from 'quasar'
const $q = useQuasar()
$q.notify('Saved') // $q.platform, $q.dark, $q.screen, $q.lang, ...

テンプレートでは、API JSON に記載されているとおりのケバブケースの props（hide-dropdown-icon、no-error-icon）を使用してください。双方向バインドする props は v-model:propName を使います（v1 の .sync 修飾子は廃止されました）。

Sass 変数：quasar >= 2.14 では sass-embedded@^1.93.2 と組み合わせます。quasar <= 2.13 では [email protected] を固定する必要があります（dist/mcp/start/vite-plugin.md:38-39）。

Vite、Vitest、Storybook、UMD、Quasar CLI の詳細： references/installation.md

ベストプラクティス（同梱の 2.33.1 ドキュメントと照合済み）

• パフォーマンスを高めるため、JS の Screen プラグインより、レスポンシブ CSS クラス（gt-sm、lt-md、ウィンドウ幅に応じた表示クラス）を優先してください。
• 大規模な QTree：大きなデータセットには no-transition を、非常に大きなデータセットには virtual-scroll（v2.25+）を使用してください。
• カスタム Dialog プラグインコンポーネント：useDialogPluginComponent で初期化し、@hide="onDialogHide" を直接バインドしてください（v2.28+ では終了理由も転送されます）。
• ネイティブのタイマーより useInterval／useTimeout／useAnimationFrame を優先してください。アンマウント時に自動キャンセルされ、SSR では安全な no-op になります。
• SSR/SSG：サーバーが設定（cookie）を把握していない限り、Dark モードの 'auto' は避けてください。そうしないと、ユーザーには一瞬ライトモードが表示されます。
• 手動の QAjaxBar ではなく、LoadingBar プラグインを使用してください。
• QInput のバリデーションには、Quasar は Regle を推奨しています（dist/mcp/vue-components/input.md:2397）。
• Quasar CLI プロジェクトでは、ラッパーは #q-app/wrappers からインポートし、quasar/wrappers は使用しないでください。

出典付きの一覧： references/best-practices.md

アップグレード（2.20 -> 2.33.1 の主な変更点）

• v2.33.0：ドキュメントとコンパクト API がパッケージに同梱されるようになりました（オフラインで利用でき、正確なバージョンに対応）。@quasar/mcp サーバーと組み合わせてください。修正点：extractDate() が最も長いロケール名に一致するようになりました。QTable の 1 ページあたりの行数セレクターが、制御された v-model:pagination に従うようになりました。仮想スクロールの scrollTo() がスクロールイベント直後に無視されなくなりました。
• v2.33.1：QPagination の input モードで、送信時に入力したページ番号がクリアされるようになりました（src/components/pagination/QPagination.js:290-292）。textToRgb() が rgb(R, G, B, A) のアルファ値を保持するようになりました（src/utils/colors/colors.js:149-174）。
• v2.28：QMenu／QTooltip から scroll-target プロパティが削除されました。ポップアップはすべてのスクロールコンテナーを自動的に追跡します。Platform.is から ie、edgeChromium、winphone、kindle、silk が削除されました。
• v2.29：QItem／QChip の @click リスナーによって、clickable が暗黙的に有効になるようになりました。
• v2.31：読み取り専用フィールド（QInput／QSelect／QFile／QField）がフォーカス状態を反映し、フォーカスを外したときに検証するようになりました。
• v2.32：ボックスの形状が判明している場合（ratio／initial-ratio／height）、QImg が SSR HTML に <img> を描画するようになりました。それ以外の場合は ssr-prerender で有効にできます。QExpansionItem／QTree がコンテンツを QSlideTransition でラップしなくなりました。
• 非推奨：QInput／QFile の getNativeElement() → nativeEl プロパティを使用してください（dist/api/QInput.json）。

2.33.x 自体では API は追加されていません。dist/api/*.json に addedIn: v2.33 マーカーはありません。すべての動作変更と新しい API、およびリリース URL については、こちらを参照してください： references/whats-new.md

セキュリティ

*-html ブール型プロパティ（options-html、display-value-html、Notify／Dialog／Loading の html）を有効にすると HTML が描画され、XSS のリスクが生じます。有効にする前にサニタイズしてください。QEditor にはサニタイズオプションがありません。サーバー側で <script>／<iframe> を削除してください。Quasar CLI は、QCLI_ プレフィックスが付いた環境変数のみをクライアントコードに公開します。

チェックリスト：references/security.md