Nuxt.jsでTransitionを使用する

Transitionの設定

default.vueで使ってみる。

<template>
  <div>
    <TheHeader />
    // 囲う
    <transition name="page" mode="out-in">
      <nuxt />
    </transition>
    // 囲う
    <TheFooter />
  </div>
</template>

name="page"とcssのプロパティが連携するので注意。

.page-enter {
  opacity: 0;
}
.page-enter-active {
  transition: opacity 1s;
}

nuxt.config.jsの設定

nuxt.config.js

{
  loading: false,
}

loadingを表示したくない場合は、false

使用する場合は、

  loading: {
    color: "#F9FAFB",
    height: "5px",
  },

のような形。

ポイント

資料