はじめに
PageFlow は、アプリケーションのルートと画面遷移を可視化する開発専用ツールです。
必要環境
- Node.js 20.19 以降
- 対応するフレームワーク連携
- 初期化時に書き込みを行うページでは、ローカルまたはテスト用データ
インストール
bash
pnpm add -D unplugin-pageflowVite の設定
Vue Router を使う Vite アプリケーションの場合：
ts
// vite.config.ts
import vue from '@vitejs/plugin-vue'
import PageFlow from 'unplugin-pageflow'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
vue(),
PageFlow.vite(),
],
})PageFlow を開く
通常どおり開発サーバーを起動します。
bash
pnpm devターミナルにプレビュー URL が表示されます。
text
unplugin-pageflow http://localhost:5173/__unplugin-pageflow/URL を開くとルートマップを閲覧できます。スクロールで拡大・縮小、ドラッグで移動し、ページを選択すると関連を確認できます。