Nuxt.js(2.2.0) で最初の Request 時に Fade in をしたい

以下がサンプルです

mkdir practice-nuxt-loading && cd $_
yarn init -y
yarn add nuxt nuxt-client-init-module
touch nuxt.config.js pages/index.vue store/index.js  

create nuxt.config.js

module.exports = { 
  modules: [
    'nuxt-client-init-module'
  ]
}

create pages/index.vue

<template>
  <div class="main" v-bind:class="{'loading': $store.state.isLoading}">
    <h1>Hello world!</h1>
  </div>
</template>

<style scoped>
.main {
  transition: all 0.3s;
  opacity: 1
}

.loading {
  opacity: 0
}
</style>

create store/index.js

import Vuex from 'vuex'

const store = () => new Vuex.Store({
  state: () => ({
    isLoading: true,
  }), 
  actions: {
    async nuxtServerInit(store, context) {
      console.log("nuxtServerInit")
    },  
    async nuxtClientInit(store, context) {
      console.log("nuxtClientInit")
      setTimeout(function() {
        store.state.isLoading = false
      }, 200)
    },  
  }
})

export default store

解説

nuxtServerInit で state に対して setTimeout を仕掛けても、 対象となる page で asyncData が実行された段階でレンダリングされてしまいます。その後に setTimeout で state を変化させても、nuxt server からすると「すでにレンダリングしている」ので何もできません。ということで browser 側で state に対して setTimeout を仕掛ける必要があります。

Nuxt.js の SSR は最初に HTML をレンダリングしつつ、直後にブラウザが再びレンダリングしています。このタイミングを利用します。この挙動については以下も参考にして見てください。

qiita.com

こちらからは以上です。