ページトランジション

ページに自動トランジションを適用できます。

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

ページ間のトランジションを追加するには、以下のCSSをあなたの app.vue に追加してください：

<template>
  <NuxtPage />
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

これにより、ページ間をナビゲートする際に以下の結果が得られます：

ページに異なるトランジションを設定するためには、ページの definePageMeta に pageTransition キーを設定します：

definePageMeta({
  pageTransition: {
    name: 'rotate'
  }
})

About ページに移動すると3D回転エフェクトが追加されます：

レイアウトトランジション

すべてのレイアウトに自動トランジションを適用できます。

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

ページとレイアウト間のトランジションを追加するには、以下のCSSを app.vue に追加してください：

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<style>
.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1);
}
</style>

これにより、ページ間をナビゲートする際に以下の結果が得られます：

View Transitions API (実験的)

Nuxtは、View Transitions APIの実験的な実装を提供しています（MDNも参照）。これは、ページ間の関連性のない要素間のトランジションを可能にする（その他多くの機能を含む）ネイティブブラウザのトランジションを実現する新しい方法です。

デモは https://nuxt-view-transitions.surge.sh で確認でき、ソースはStackBlitz上にあります。

Nuxtの統合は積極的に開発されており、設定ファイルの experimental.viewTransition オプションで有効にすることができます：

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})

可能な値は：false、true、または 'always'です。

trueに設定すると、ユーザーのブラウザが prefers-reduced-motion: reduce に一致する場合、Nuxtはトランジションを適用しません（推奨）。alwaysに設定されている場合、Nuxtは常にトランジションを適用し、ユーザーの設定を尊重するかどうかはあなた次第です。

デフォルトでは、すべてのページでビュートランジションが有効になっていますが、異なるグローバルデフォルトを設定することができます。

export default defineNuxtConfig({
  app: {
    // グローバルにビューのトランジションを無効にし、ページごとにオプトイン
    viewTransition: false
  },
})

ページの viewTransition のデフォルト値を、ページの definePageMeta で viewTransition キーを設定することにより、オーバーライドすることが可能です：

definePageMeta({
  viewTransition: false
})

また、同じ結果を得るために Vue のトランジション pageTransition や layoutTransition を使用している場合（上記参照）、ユーザーのブラウザが新しいネイティブ Web APIをサポートしていれば、Vue トランジションを 無効にする ことができます。以下の内容で ~/middleware/disable-vue-transitions.global.ts を作成します：

export default defineNuxtRouteMiddleware(to => {
  if (import.meta.server || !document.startViewTransition) { return }

  // 組み込みVueトランジションを無効にする
  to.meta.pageTransition = false
  to.meta.layoutTransition = false
})

既知の問題

• ページ設定関数内でデータフェッチングを行っている場合、現時点ではこの機能を使用することを見直すかもしれません（設計上、View Transitionsは発生している間、DOMの更新を完全にフリーズします）。<Suspense>が解決する直前に View Transition を制限することを検討していますが、その間はこの機能の採用を慎重に考えることをお勧めします。