【nuxt3】ページ遷移時にフェードする

この記事の環境

    "nuxt": "^3.8.0"

やりたいこと

ページ遷移したときに、サイドバーやヘッダー、フッターなどはそのままでページの部分だけフェードのアニメーションをかけたいです。

やり方

まず、nuxt.config.tsに設定を追加します。

次に、<NuxtPage>を読み込むvueファイルでstyleをかけて調整します。

0.layoutsの確認

ヘッダーやフッターなど、フェードをかけたくない部分はlayoutsのファイルに記述するようにします。

pages内のファイルに書くとフェードされてしまいます。

1.nuxt.configの記述

docのままなのですが、nuxt.config.tsに以下のように追加します。

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  },
})

2.styleの調整

<NuxtPage>を読み込むvueファイル内で<style>タグを以下のように設定してみましょう。

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.1s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>

これでページ遷移するときにフェードがかかるようになります。