# Quasar デザインシステム

## Quasar デザインシステムのインターフェースプレビュー

セッション名と形式を選び、参加人数を調整して、ローカルに保存される概要を作成します。

## Quasar デザインシステムのデザインリファレンス

Quasar 2.34.0 と Vue 3 を使用。色には実際の --q-* ランタイム変数を使用し、スペーシングとタイポグラフィの参照値には Sass のデフォルト値を使用しています。アプリケーションの見出し、予定一覧のイラスト、システムフォントの上書きは独自のものです。Material Icons は @quasar/extras 2.1.0 を通じてローカルで提供されます。

### デフォルトの Quasar ブランドロール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --q-primary | #1976D2 | ステッパーの状態、メインアクション、スライダー。 |
| --q-secondary | #26A69A | セカンダリロール。 |
| --q-accent | #9C27B0 | アクセントの役割。 |
| --q-positive | #21BA45 | ポジティブなフィードバックのロール。 |
| --q-negative | #C10015 | 検証／エラーのロール。 |
| --q-info | #31CCEC | 情報ロール。 |
| --q-warning | #F2C037 | 警告ロール。 |
### 標準のスペーシングヘルパー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $space-base | 16px | Sass の基本スペーシング単位。 |
| q-pa-xs / q-ma-xs | 4px | 基本スペーシングの4分の1。 |
| q-pa-sm / q-ma-sm | 8px | 基本スペーシングの半分。 |
| q-pa-md / q-ma-md | 16px | 基本スペーシング。 |
| q-pa-lg / q-ma-lg | 24px | 基本スペーシングの1.5倍。 |
| q-pa-xl / q-ma-xl | 48px | 基本スペーシングの3倍。 |
| q-mt-md | 16px top margin | リモート参加のトグルの上で使用。 |
| q-ml-sm | 8px left margin | ナビゲーション操作の間で使用。 |
### 標準のタイポグラフィクラスのスケール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| text-h4 | 2.125rem / 2.5rem, weight 400 | デフォルトのディスプレイ見出しユーティリティ。 |
| text-h5 | 1.5rem / 2rem, weight 400 | デフォルトのセクション見出しユーティリティ。 |
| text-h6 | 1.25rem / 2rem, weight 500 | デフォルトの小見出しユーティリティ。 |
| text-body1 | 1rem / 1.5rem, weight 400 | デフォルトの大きめの本文ユーティリティ。 |
| text-body2 | 0.875rem / 1.25rem, weight 400 | デフォルトのコンパクトな本文ユーティリティ。 |
| Application font | system-ui, sans-serif | 明示的に指定した独自の上書き値です。Quasar のデフォルトの Roboto フォントファミリーは、ここではダウンロードされません。 |
### ブレークポイントとアプリケーション独自のレイアウト寸法

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| sm minimum | 600px | 標準の Quasar ブレークポイントの開始位置。 |
| md minimum | 1024px | 標準の Quasar ブレークポイントの開始位置。 |
| lg minimum | 1440px | 標準の Quasar ブレークポイントの開始位置。 |
| xl minimum | 1920px | 標準の Quasar ブレークポイントの開始位置。 |
| Application stack breakpoint | 740px | 独自に設定した、2列から縦並びへの切り替え位置。 |
| Page title | 34px / 1.15; 29px mobile | 独自のタイポグラフィ階層。 |
| Page gap / padding | 24px / 32px | 独自の全体構成。 |
| Participants slider | min 2, max 16, step 1 | 実際のQSliderプロパティを使用しており、見た目だけの範囲入力ではありません。 |
## Quasar デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Quasarのデザインシステムコンポーネントで、手順付きタスクを一通り構築

### Quasar のコンポーネントでタスク全体をガイド

> Quasarは、Vueコンポーネントに加えてスタイル用ヘルパーとアプリケーションフレームワークを提供します。このサンプルでは、Vue 3のエントリーポイントからコンポーネントを直接使用しています。ネイティブのステッパーで、フォーム、ラジオグループ、スライダー、トグル、最終確認を連携させています。これらのコントロールを紹介するだけであれば、画面全体を覆うQLayoutシェルは必要ありません。

このセッションの概要には、進行予定を確認しながら、実施形式とグループの設定を選ぶという明確な目的があります。コンポーネントライブラリがコントロールとナビゲーションの状態を担い、3種類のオリジナルの進行予定と合計45分という内容はアプリケーション側で用意しています。スケジュールサービスとの連携を示すものではありません。

関連する仕様を確認する

## Quasarのデザインシステムでは、ブランド変数と名前付きパレットクラスを併用

### ブランド変数と名前付きパレットクラスの併用

検証済みのデフォルトスタイルシートでは、実行時の--q-primaryの値は#1976D2です。QStepper、QBtn、QSliderにはcolor="primary"を指定しているため、プライマリのスタイルがその役割に沿って適用されます。secondary、accent、positive、negative、info、warningは、各コントロールごとに選ぶ場当たり的な色ではなく、それぞれ独立した名前付きの役割です。

保存済みバナーには、名前付きの緑色パレットユーティリティを使い、淡い背景色と濃い文字色を設定しています。成功を伝えるのは色だけではなく、明示的なメッセージです。青いリングの図はオリジナルの装飾であり、支援技術からは隠されています。追加のフォーム状態を表すものではありません。

関連する仕様を確認する

## Quasar デザインシステムのスペーシングサフィックスは、文字どおりに読み取る

### Quasarのスペーシングサフィックスは、文字どおりに読み取る

Quasarのスペーシングクラスは、種類・方向・サイズを組み合わせて指定します。q-mt-mdは中サイズの上マージン、q-ml-smは小サイズの左マージンを意味します。デフォルトの基準値は16ピクセルで、xsは4、smは8、mdは16、lgは24、xlは48です。xlへの変化量は基準値の3倍であり、推測で32ピクセルとするものではありません。

ページでは、コントロール内にこれらのネイティブヘルパーを使い、全体のレイアウトにはオリジナルのCSSを使用しています。デフォルトのタイポグラフィユーティリティには、0.875remのtext-body2と1.5remのtext-h5があります。ページタイトルはオリジナルの34ピクセルで、フォントを明示的にsystem-uiに切り替えつつ、ネイティブコンポーネントのグリフにはMaterial Iconsを維持しています。

関連する仕様を確認する

## Quasar デザインシステムのステッパーだけでは、フォームの入力検証は行われない

### ステッパーだけではフォームを検証できない

QStepperは現在のステップ番号を保持し、名前付きのQStepセクションを3つ含みます。ステップが完了扱いになるのは、その先へ進んだ後だけです。サンプルではどちらのレイアウトでも縦向きにしており、スマートフォンで3つの横並びヘッダーが窮屈にならないようにしながら、順序を明確にしています。

最初のContinue操作はQFormに属しています。ハンドラーはvalidateの完了を待ってから、stepを2に設定します。ヘッダーからの移動は無効にしているため、先のステップの見出しをクリックして検証を回避することはできません。Back操作をしてもタイトル、形式、グループの値は保持されます。これらのモデルは、アンマウントされるフィールドではなく親のSFCにあるためです。

関連する仕様を確認する

## Quasar デザインシステムのQFormが使うのは内部ルールであり、すべてのネイティブ制約ではない

### QFormが使うのは内部ルールであり、すべてのネイティブ制約ではない

タイトル用のQInputには、空白を除去したうえで、意味のある文字を5文字以上入力するよう求める内部ルール配列があります。このルールはQForm.validateの対象です。validateをプログラムから呼び出す場合、nativeのrequired属性やemail属性だけではこのルールの代わりになりません。そのため、動作する例では実際の制約をルールとして直接記述しています。

入力に不備がある状態で試すと、フィールドにエラーが表示され、最初のステップにとどまります。入力を修正すれば、同じContinueボタンで先へ進めます。60文字の上限と表示カウンターはタイトルを概要に収めるのに役立ち、インラインルールはタイトルが短すぎる場合や未入力の場合に進めない理由を説明します。

1. タイトルを空欄のまま最初のステップを送信し、検証メッセージを確認します。

2. 内容のあるタイトルを入力し、セッション形式を選択します。

3. Continueで先へ進み、Backで戻って、入力値が保持されることを確認します。

関連する仕様を確認する

## Quasar デザインシステムのラジオ、スライダー、トグルは、それぞれ異なる選択を表す

### ラジオボタン、スライダー、トグルはそれぞれ異なる選択を表す

QOptionGroupは、「デザインレビュー」「スケッチセッション」「リサーチの統合」から1つを選ぶためのものです。選択を変えると、対応する進行予定の配列に切り替わります。進行予定の数は固定のサンプルコンテンツであり、形式を変えると活動内容が切り替わりますが、合計45分は維持されます。

QSliderでは、参加人数を2人から16人までの整数で指定します。QToggleでは、リモート参加者を含めるかどうかを記録します。隣のヒントは、全員で1つのテーブルを囲む形式から、共有ボードとリモート進行を使う形式へと切り替わります。これらのコントロールは、互いに無関係なデモ用ウィジェットではなく、画面上の概要に反映されます。

関連する仕様を確認する

## Quasar デザインシステムの最終ステップでは、リセットするまでローカルの結果を固定

### 最終ステップでは、リセットするまでローカルの結果を固定

確認ステップでは、空白を除去したタイトル、形式、参加人数、参加方法を再表示します。保存するとローカルのsavedフラグが変わり、SaveとBackが無効になって、グループの人数を示すバナーが表示されます。「別のセッションを開始」を選ぶと、すべてのモデルをクリアして最初のステップに戻るため、一連の流れが最後まで確認できます。

カレンダーやメッセージングのAPIへのリクエストは行いません。バナーには招待状が送信されていないことを明記し、確認画面の文言でも、保存によってイベントが作成されるわけではないと伝えています。実際のスケジューラーでそのように案内するには、日付、タイムゾーン、宛先、およびバックエンドからの実際の応答が必要です。

関連する仕様を確認する

## Quasar デザインシステムでは、ネイティブコンポーネントのセマンティクスと実際のフォーカステストを活用

### ネイティブコンポーネントのセマンティクスと実際のフォーカステストを活用

ネイティブコントロールは、ラジオ、スライダー、スイッチのロールを提供します。スライダーには「参加人数」というラベルがあり、タイトルフィールドには見えるラベルとフィールド単位の検証メッセージがあります。ステッパーは現在のステップを示し、ステップのタイトルを使って内容にラベルを付けます。装飾用の図は、アクセシブルな読み上げの順序から除外しています。

ローカルテストでは、キーボードでスライダーを操作し、リモート参加の切り替え、検証を経た次のステップへの進行、9人参加のハイブリッド形式の概要の保存を行いました。狭い画面でのレイアウトも確認しました。ステッパーの静止画像では、こうした一連の動作を示せず、検証の仕組みが接続されていることも証明できません。

- 現在のステップとそのコンテンツのタイトルを一致させます。

- ステップのモデルを変更する前に、ルールに基づいて検証します。

- ローカルでの正確な結果を説明するステータスバナーを使用します。

関連する仕様を確認する

## Quasar デザインシステムを含める Quasar CSS と必要なアイコンセット

### Quasar CSS と、そこで必要となるアイコンセットを含める

エントリーファイルではQuasarをインポートしてプラグインを登録し、quasar/dist/quasar.cssを読み込み、@quasar/extrasからMaterial Iconsのスタイルシートをインポートします。SFCでは、使用するコンポーネントをインポートします。ローカルバンドルにはアイコンフォントファイルがインライン化されるため、リモートのフォントをリクエストしなくてもチェックマークや編集アイコンを表示できます。

元のスタイルシートはQuasar CSSに従い、埋め込み時に合わせてドキュメントの高さをコンテンツに応じて調整します。すべてのネイティブコンポーネントをグローバルに再スタイルしたり、独自のスペーシングスケールを作ったりはしません。Quasar CLIまたはViteプラグインを使う完全なアプリケーションでは、標準のビルド連携を利用できます。このサンプルでは、小規模なVueエントリーで同じコンポーネントを使用する方法を示します。

関連する仕様を確認する

## Quasar デザインシステムのコンポーネント例

### ネイティブのステッパーを使った一連のワークフロー

QStepper/QStep、QForm/QInput、QOptionGroup、QSlider、QToggleと、入力内容から生成されるアジェンダ。

```
<script setup>
import {ref,computed} from 'vue';import {QStepper,QStep,QStepperNavigation,QForm,QInput,QOptionGroup,QSlider,QToggle,QBtn,QCard,QCardSection,QBadge,QBanner} from 'quasar';
const step=ref(1),title=ref(''),format=ref('critique'),people=ref(8),remote=ref(false),saved=ref(false),form=ref();const formats=[{label:'Design critique',value:'critique'},{label:'Sketching session',value:'sketch'},{label:'Research synthesis',value:'research'}];const names={critique:'Design critique',sketch:'Sketching session',research:'Research synthesis'};const agenda=computed(()=>format.value==='critique'?[['10 min','Set the question'],['25 min','Review the work'],['10 min','Choose next actions']]:format.value==='sketch'?[['5 min','Frame the prompt'],['25 min','Sketch independently'],['15 min','Compare directions']]:[['10 min','Sort observations'],['20 min','Name the patterns'],['15 min','Record open questions']]);async function next(){if(await form.value.validate())step.value=2;}function reset(){step.value=1;title.value='';format.value='critique';people.value=8;remote.value=false;saved.value=false;}
</script>
<template><main class="session-builder"><header><div><p class="eyebrow">QUASAR · GUIDED WORKFLOW</p><h1>Make time for better work.</h1><p class="intro">Build a small session brief with a native stepper, validated fields and a live agenda.</p></div><QBadge color="primary" label="45 MINUTES"/></header><div class="builder-grid"><QStepper v-model="step" vertical color="primary" animated flat bordered class="session-stepper"><QStep :name="1" prefix="1" title="Name the session" caption="Purpose and format" :done="step>1"><QForm ref="form" @submit="next"><QInput v-model="title" outlined label="Session title" maxlength="60" counter lazy-rules :rules="[v=>v.trim().length>=5||'Use at least five non-space characters.']"/><p class="field-label">Session format</p><QOptionGroup v-model="format" :options="formats" color="primary"/><QStepperNavigation><QBtn color="primary" label="Continue" type="submit" no-caps/></QStepperNavigation></QForm></QStep><QStep :name="2" prefix="2" title="Shape the group" caption="People and participation" :done="step>2"><p class="field-label">Participants: <strong>{{people}}</strong></p><QSlider v-model="people" :min="2" :max="16" :step="1" label color="primary" aria-label="Participants"/><QToggle v-model="remote" label="Include remote participants" color="primary" class="q-mt-md"/><p class="hint">{{remote?'Reserve a shared board and a facilitator for the remote group.':'Use one shared table and keep the work visible to everyone.'}}</p><QStepperNavigation><QBtn color="primary" label="Review brief" no-caps @click="step=3"/><QBtn flat label="Back" no-caps class="q-ml-sm" @click="step=1"/></QStepperNavigation></QStep><QStep :name="3" prefix="3" title="Review the brief" caption="Save a local snapshot"><p class="review-title">{{title.trim()}}</p><p>{{names[format]}} · {{people}} people · {{remote?'Hybrid':'In person'}}</p><p class="hint">The agenda totals 45 minutes. Saving does not create a calendar event or invite anyone.</p><QStepperNavigation><QBtn color="primary" :label="saved?'Saved locally':'Save local brief'" :disable="saved" no-caps @click="saved=true"/><QBtn flat label="Back" no-caps class="q-ml-sm" :disable="saved" @click="step=2"/></QStepperNavigation><QBanner v-if="saved" rounded class="bg-green-1 text-green-10 q-mt-lg" role="status">Local brief saved for {{people}} people. No invitation was sent.<template #action><QBtn flat label="Start another" no-caps @click="reset"/></template></QBanner></QStep></QStepper><QCard flat bordered class="agenda-card"><QCardSection><p class="eyebrow">LIVE AGENDA</p><h2>{{title.trim()||'Your next working session'}}</h2><p class="agenda-format">{{names[format]}}</p><div class="time-art" aria-hidden="true"><i></i><i></i><i></i><span>45′</span></div><ol class="agenda-list"><li v-for="row in agenda" :key="row[1]"><span>{{row[0]}}</span><strong>{{row[1]}}</strong></li></ol><div class="session-meta"><span>{{people}} participants</span><span>{{remote?'Hybrid setup':'One shared table'}}</span></div><p class="local-note">Original sample agenda. Quasar supplies the form and navigation components.</p></QCardSection></QCard></div></main></template>
```

コードリファレンス

- 最初のステップ移行前にQForm.validate()の完了を待ちます。

- タイトルのルールでは、前後の空白を除いた文字列が十分な長さかを確認します。

- レビューのステップでは、カレンダーイベントを作成しません。

### 独自のアジェンダ構成

ネイティブのQuasarコンポーネントを囲むレスポンシブレイアウトと、時間を表す装飾的なイラスト。

```
html,body{height:auto;min-height:0}body{background:#f3f5f8;font-family:system-ui,sans-serif}.session-builder{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.eyebrow{font-size:11px;font-weight:650;letter-spacing:.13em;color:#5c6c80}h1{font-size:34px;line-height:1.15;font-weight:650;margin:14px 0;letter-spacing:-.02em}.intro{font-size:15px;line-height:1.7;max-width:610px;color:#5c6c80}.builder-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}.field-label{font-size:14px;font-weight:600;margin:20px 0 8px}.hint,.local-note{font-size:12px;line-height:1.7;color:#647187}.review-title{font-size:20px;font-weight:650;line-height:1.4}.agenda-card .q-card__section{padding:24px}.agenda-card h2{font-size:25px;line-height:1.25;font-weight:600;margin:16px 0 8px;letter-spacing:0}.agenda-format{font-size:14px;color:#647187}.time-art{height:140px;background:#e6eef8;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:24px 0}.time-art i{position:absolute;width:130px;height:130px;border:18px solid #8db8e8;border-radius:50%;left:10%;top:45%}.time-art i:nth-child(2){border-color:#c1d7ef;width:170px;height:170px;left:35%;top:-30%}.time-art i:nth-child(3){border-color:#d8e5f5;width:150px;height:150px;left:65%;top:40%}.time-art span{font-size:45px;font-weight:700;position:relative;color:#175a9e}.agenda-list{list-style:none;padding:0;margin:0}.agenda-list li{display:grid;grid-template-columns:65px 1fr;gap:16px;border-bottom:1px solid #dfe5ec;padding:16px 0;font-size:14px}.agenda-list span{color:#657991;font-size:12px}.agenda-list strong{font-weight:600}.session-meta{display:flex;justify-content:space-between;gap:12px;margin:24px 0;font-size:12px;color:#5c6c80}.local-note{margin-bottom:0}@media(max-width:740px){.session-builder{padding:24px 14px}header{flex-direction:column;gap:4px}h1{font-size:29px}.builder-grid{grid-template-columns:1fr}.session-stepper .q-stepper__step-inner{padding-right:18px}.agenda-card .q-card__section{padding:22px}}
```

コードリファレンス

- 埋め込みに合わせて、コンテンツの高さを使用します。

- アプリケーションのフォント上書きを明示します。

## Quasar デザインシステムのエージェント設定

### 実装の出発点

Vue 3でQuasar 2.34.0および@quasar/extras 2.1.0を検証済みです。デフォルトのステップインジケーターには、ローカルのアイコンフォントが必要です。

```
// Create the project first:
// npm create vite@latest quasar-specimen -- --template vue
// cd quasar-specimen && npm install
// In a Vite Vue 3 project:
// npm install quasar@2.34.0 @quasar/extras@2.1.0
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import {Quasar} from 'quasar';
import 'quasar/dist/quasar.css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(Quasar, {plugins: {}}).mount('#app');
// index.html contains <div id="app"></div>.
// Components are explicitly imported in App.vue; no auto-import plugin is required here.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### あなたのプロジェクト向けプロンプト

```
Quasar 2.34.0と、付属のガイド付きセッション概要を使用します。QStepper、QForm、QInputの検証、セッション形式のラジオコントロール、参加者スライダー、アジェンダの切り替えを維持してください。次のステップに進む前にフォームの検証完了を待ち、戻る際も入力値を保持し、同じ値からレビュー概要を生成します。保存されるのはローカルの概要です。以降に内容を変更すると、保存済みの状態は無効になります。QuasarのスタイルシートとローカルのMaterial Icons設定を含め、配車や予約のサービスを新たに作ることなく、狭い画面でも使いやすいレイアウトにしてください。
```

## Quasar デザインシステムの出典と対象範囲

ネイティブコンポーネントとローカルのMaterial Iconsを使用したQuasar 2.34.0。アジェンダとビジュアルはサンプルコンテンツです。保存してもカレンダーイベントは作成されず、招待も送信されません。

- ステッパー ステップの状態、ナビゲーション、アクセシビリティ。

- Form 内部ルールの検証と送信動作。

- 入力 ラベル、文字数カウンター、ルール。

- オプショングループ 相互排他的な形式の選択肢。

- Slider 数値入力用のキーボードとポインター操作。

- カラー 実行時のブランドロール。

- スペーシング ネイティブのスペーシングヘルパー構文。

- タイポグラフィ デフォルトのタイポグラフィユーティリティ。

- 連携 Vue/Viteの連携に関するリファレンス。

## Quasar デザインシステム関連リソース

### React Native Elements

React Native Elements 5.0.0を使って、テーマの実際のロール、状態管理された入力と選択、バリデーション、ローカルでの確認、テスト済みのWebビルドを備えた、完全なフォーカスプラン作成画面を構築してください。

### React Suite

検証済みの v6 CSS 変数、日付セルのマーカー、選択日の予定一覧、モーダル内の検証、明示的なローカルスケジュール設定ルールを備えた、標準機能による React Suite の予定確認カレンダー。

### Skeleton

Skeleton 5.0.1の実際のCerberus、Mint、Roseテーマを、トークンのライブ検査、ダークな背景の組み合わせ、元に戻せるローカル状態を備えた、読書机をイメージした画面で比較します。


- [実装リファレンス](https://quasar.dev/vue-components/stepper/)
- [ソース](https://quasar.dev/style/color-palette/)
- [ソース](https://quasar.dev/style/spacing/)
- [ソース](https://quasar.dev/style/typography/)
- [ソース](https://quasar.dev/style/breakpoints/)
- [関連する仕様を確認する](https://quasar.dev/start/vite-plugin/)
- [関連する仕様を確認する](https://quasar.dev/style/color-palette/)
- [関連する仕様を確認する](https://quasar.dev/style/spacing/)
- [関連する仕様を確認する](https://quasar.dev/vue-components/stepper/)
- [関連する仕様を確認する](https://quasar.dev/vue-components/form/)
- [関連する仕様を確認する](https://quasar.dev/vue-components/option-group/)
- [関連する仕様を確認する](https://quasar.dev/vue-components/banner/)
- [コードリファレンス](https://quasar.dev/vue-components/stepper/)
- [コードリファレンス](https://quasar.dev/style/spacing/)
- [ステッパー ステップの状態、ナビゲーション、アクセシビリティ。](https://quasar.dev/vue-components/stepper/)
- [Form 内部ルールの検証と送信動作。](https://quasar.dev/vue-components/form/)
- [入力 ラベル、文字数カウンター、ルール。](https://quasar.dev/vue-components/input/)
- [オプショングループ 相互排他的な形式の選択肢。](https://quasar.dev/vue-components/option-group/)
- [Slider 数値入力用のキーボードとポインター操作。](https://quasar.dev/vue-components/slider/)
- [カラー 実行時のブランドロール。](https://quasar.dev/style/color-palette/)
- [スペーシング ネイティブのスペーシングヘルパー構文。](https://quasar.dev/style/spacing/)
- [タイポグラフィ デフォルトのタイポグラフィユーティリティ。](https://quasar.dev/style/typography/)
- [連携 Vue/Viteの連携に関するリファレンス。](https://quasar.dev/start/vite-plugin/)