Zenn
🦔

Inertia + Vue3 + AdminLTE レイアウトが一部崩れるのを修正する

2023/08/10に公開
Laravel
Vue 3
inertia
adminlte
tech

Laravel にてInertia + Vue3でCSRしており、デザインにはAdminLTEを使用しているのだが、onLoadが走らない関係で画面中央に寄らないといけないボックスが上に詰まっていたり、左側のメニューが一部おかしくなったりなどしたのをどうにか直したので備忘録として残しておく。

環境

  • Laravel 10.10
  • Inertia + Vue3
  • AdminLTE infyomlabs/laravel-ui-adminlte: 5.2

laravel-ui-adminlteの使い方が果たして正しいのかはおいておく...。

事象

ログイン画面が上に寄ってしまう


上下左右中央に寄るはずが上に寄ってしまう

原因はログイン後の画面で<body>タグにstyle="height:auto"がつくためにずれてしまうようだった。
当然ながらF5で画面更新すると上下左右中央にちゃんとなる。

原因が分かったのでonMounted()時に属性を削除するように追加。

import {onMounted} from "vue";
onMounted(() => {
  // 他に使用していなさそうなのでstyle属性ごと削除
  document.getElementsByTagName('body')[0].removeAttribute('style');
});

→直った＼(^o^)／

ログイン後にユーザー名の位置がずれる


分かりづらいがユーザーアイコンが罫線にかぶっている

余談。元のテンプレートはユーザーアイコンは画像だったが、ユーザーごとに変える予定がなかったのでFont Awesomeのユーザーアイコンを使用。

これについては原因が良く分からなかった。
前述のログイン画面が上に寄ってしまう際に、通常は<body>タグにstyle="height:XXXpx"がついていたため、これを消せば何とかなるかと思ったが何ともならなかった。
同じくF5で画面更新すると正しい余白になる。

原因が分からずしばらく迷走していたが、開発者ツールを起動したときに直っていることに気付いた。
これは画面リサイズもトリガーになっているのでは？と思い、onMounted()でresizeイベントを無理やり発火。

onMounted(() => {
  const resize_event = new Event('resize');
  window.dispatchEvent(resize_event)
)}

注意すべきはresizeイベントはwindowに対して行うこと。ってことくらい。

→直った＼(^o^)／

本文と関係ない感想

AdminLTEがせっかく良いテンプレートなのでVue用のものが欲しいな～と思った。
Laravel用のライブラリは軒並みbladeだったので誰か作って...。
laravel-ui-adminlteを選んだのもCSSとJSだけ手に入ればいいや...という感じでの選択だった。
ただAdminLTEがBootstrap4を使用しているためにJQueryに依存しているためそもそもVueと使うのに向いてないって言うのもある。／(^o^)＼

Discussion