崩れる

Web

Vuetify3でpageTransitionしたら、footerが崩れた

Nuxt3でVuetify3を使っている個人プロジェクトでの出来事。nuxt.config.tsでpageTransitionを設定すると何故かコンテンツより、footerが先に描画される現象が発生。いまだ修正ならずだけど、メモ。バージョンは以下。

node v20.10.0
vue: 3.4.3
nuxt 3.9.1
vuetify 3.4.10

フッターが何故か崩れる

見出しのママですが、何故かタグの順番が入れ替わってしまいます。pageTransitionを外すと、タグの並びは順番どおりに。最初はv-footerが影響しているのかと思いましたが、普通のdivに変えても結果は変わりません。色々試した結果、原因がわかりました。default.vueの組み方でした。崩れる書き方以下。

<template>
  <v-app>
    <AppHeader />
      <slot />
    <AppFooter />
  </v-app>
</template>

で、以下にしたら崩れがおさまりました。<slot/>を何かで囲んであげると良いみたいです。

<template>
  <v-app>
    <AppHeader />
    <div class="content">
      <slot />
    </div>
    <AppFooter />
  </v-app>
</template>

コメント