 Vuetify3 の画面のレイアウトの基本と、ボックス（領域）を確保する方法、位置合わせや寄せの方法、色やフォントの指定方法、スペーシング、各種のコンポーネントについて説明した記事です。Vue3 そのものについての説明はありません。 サンプルコードは主に Option API および JavaScript で記述しています。

当面、すべての記事を無料公開とする予定ですが、もし筆者に対して支援いただけるという方がおられましたら、記事を購入していただけますと大変ありがたいです。 

Vuetify3 の基本

Vuetify3 のプロジェクト作成

Vuetify3 アプリケーションの典型的なデザイン

Application (v-app)

Application Bar （v-app-bar）

Main Contents （v-main）

Container （v-container）

Navigation Drawers （v-navigation-drawer）

Footer (v-footer)

div, v-container, v-sheet, v-card の各要素の違い

領域の確保(Card): v-card

要素サイズの指定 (height, width, class="h-* w-*")

要素を横方向に並べる (block要素、d-flex)

v-layout と mx-auto  を使った強制的な中央寄せ

親要素の中央（縦横とも）に配置する

要素の幅を指定して横方向に並べる: GRID (v-row / v-col)

横方向の空白を使った寄せ (v-spacer)

要素の位置の微調整: マージン、パディング (Spacing Helper)

文字サイズの指定 (Typography)

フォントの指定と外部ファイルの読み込み

色の設定 (color, bg-color, class)

アイコン: Meterial Design Icons (v-icon)

Vuetify での template 要素の使い方

Vuetify3 の v-layout について

ボタン (Button): v-btn

チェックボックス (Checkbox): v-checkbox

セレクト (Select): v-select

スライダー (Slider): v-slider / v-range-slider

ラジオボタン (Radio Button): v-radio / v-radio-group

テキストフィールド (Textfield): v-text-field

ファイル選択 (Fileinput): v-file-input

スイッチ (Switch): v-switch

テキストエリア (Textarea): v-textarea

コンボボックス (Combobox): v-combobox

フォーム系のコンポーネントで使える共通の設定

メニュー (Menu): v-menu

ダイアログ (Dialog): v-dialog

チップ (Chip): v-chip

ヒントの表示 (Tooltip): v-tooltip

リスト (List): v-list

テーブル (Tables): v-table

表によるデータの可視化 (DataTables): v-datatable

画像の表示 (Images): v-img / v-parallax

ツールバー (Toolbar): v-toolbar

画面切り替え：タブ (Tabs): v-tab

画面切り替え：カルーセル (Carousel): v-carousel

ページ送り (Pagenation): v-pagenation

選択式ボタン (Button Toggle): v-btn-toggle

プログレスバー (Progress Circle/Linear): v-progress-circle/v-progress-linear