背景

実装中のUIは、
ブラウザ画面内に複数のウインドウを並べて操作できる
ものになっています。

公式に例でいうとこんな感じ

使用ライブラリ

そこでGoldenLayoutというJavaScriptライブラリを使用しています。
https://golden-layout.com/

ちなみにVue.jsには対応していません。辛い。
ただJavaScriptライブラリなので無理やりVueコンポーネントに導入して
使用することはできています。

この記事はVue.jsで使用することを前提に記述していきます。
Reactの例は公式ドキュメントにあります。

通常のシングルページアプリケーションと大きく違うのは、
ページ遷移でなく、
ウインドウを出すか出さないか、消すか
という動きになるところです。

意識する点として、
重複したウインドウは出すのか、
新たに同じウインドウを出そうとした場合中身を更新するのか、
ウインドウからウインドウに遷移する際に値を渡す際は
どう伝達するか、などが挙げられます。

ちなみに私はpinia(状態管理ライブラリ)
を使用して別ウインドウへの情報伝達を行っています。

主なもののみのディレクトリ構成を下記に示します。

.
├── src
│   ├── layouts
│   ├── panes
│   ├── components
│   └── stores
└── test

特徴としてはpanes(ペイン)ディレクトリがあることです。
ペイン(ウインドウ)単位ごとにコンポーネントを作成し、
panesディレクトリに配置することにより、
呼び出されるペインとその他に使われているコンポーネントを区分しています。

GoldenLayoutを導入した親コンポーネントでは、
/panes配下に置いたコンポーネントを探索して表示するよう
処理を記述しています。

ページ遷移ではなくウィンドウ形式のUIにしたい場合は
GoldenLayoutの使用を検討してみましょう。