画面のコンポーネントを自由自在にサイズ変更・保存

概要

ダッシュボードのような画面を作成する際、1つ1つの要素の大きさをグリッドに合わせて変更したり、変更した状態を保存できるようにしました。
その際に実施したことをまとめてみました。

やったこと

• vue-grid-layoutのインストール
• 画面にGridLayoutコンポーネントを配置
• 位置情報や大きさを保存

前提

• nuxt.jsのプロジェクト構成で開発
• SSR（mode: 'universal'）

vue-grid-layoutのインストール

プロジェクトにライブラリをインストールしました。
https://github.com/jbaysolutions/vue-grid-layout

yarn add vue-grid-layout

画面にGridLayoutコンポーネントを配置

pagesに保存したvueファイルで <grid-layout>及び<grid-item>タグを配置しました。
SSRの場合、<grid-layout>タグを配置する際は、<client-only>タグで囲う必要があります。

各グリッドの項目は、ドラッグアンドドロップ、サイズ変更を可能にするため、「is-draggable」「is-resizable」のオプションを"true"に設定しています。

参考にした記事
https://kubio.dev/nuxt-client-only/

        <client-only>
          <div class="mb-5">
            <grid-layout
              v-if="chartList"
              :layout="chartList"
              :col-num="12"
              :row-height="100"
              :is-draggable="true"
              :is-resizable="true"
              :is-mirrored="false"
              :vertical-compact="true"
              :margin="[10, 10]"
              :use-css-transforms="true"
            >
              <grid-item
                v-for="(item, key) in chartList"
                :key="key"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
              >
                  <v-card>
                  Vuetifyのカードコンポーネントにグラフのコンポーネントを配置しています。
                  ※記載は省略
                  </v-card>
              </grid-item>
            </grid-layout>
          </div>
        </client-only>

位置情報や大きさを保存

grid-itemの位置（x, y)、大きさ(w, h）、インデックスとなる値（i）を保存。
復元時にの各値に設定するようにして、レイアウトを復元しました。

保存先はローカルストレージでも良かったのですが、このプロジェクトではサーバーサイドで保存させました。

{
   "i": 1,
   "x": 0,
   "y": 0,
   "w": 8,
   "h": 4
   ・・・（省略）
}

出来上がった様子

こんな感じでグリッドサイズを変更して表示を制御できます。

参考情報

• Vue Grid Layout(Document)