[Vuetify]v-alertを使用してモーダルでアラート機能を実装する方法

はじめに

アラート機能をNuxt.js＋Vuetifyで実装しようと思いました。
アラートはコンポーネントで管理して、本体ページにアラートが必要な際に表示、数秒後
には消えるといった実装にしたかったのですが、分からずに困ってしまいました。
というのも、Vueに関しては非同期でコンポーネントを読み込むという説明が公式であったのですが、Nuxtでは見つけられなかったからです。

参照： Vue.js非同期でコンポーネント読み込む

実装

pageにalertコンポーネントを読み込ませて表示させてから４秒後に消します。
(alertはエラー用のコンポーネントも用意しています)

page

<template>
  <v-app>
    <div
      class="teal lighten-1 background pa-10"
    >
 // レスポンスの値で条件分岐

　　　　　　　　//成功した時
      <div v-if="responseBook === 'OK'">
        <AlertSuccess />
      </div>
　　　　　　//失敗した時
      <div v-else-if="responseBook === 'ERROR'">
        <AlertError />
      </div>
    </div>
  </v-app>
</template>
<script>
export default {
  computed: {
    responseBook () {
      return this.$store.state.book.responseBook
    }
  }
}
</script>

pageの方は通常通りコンポーネントを読み込ませているだけです。
サーバーの応答によって処理を変えています。サーバー側の処理はstoreでaxiosを使用していますが、今回は割愛します。

components/alert

<template>
  <v-alert
    type="success"
    :value="alert"
    dense
    class="alert"
  >
    登録しました。
  </v-alert>
</template>
<script>
export default {
  data () {
    return {
      alert: true
    }
  },
  created () {
    setTimeout(() => {
      this.alert = false
    }, 4000)
  }
}
</script>

templateやscriptはVuetifyのv-alertのテンプレートをそのまま引用しています。
scriptではsetTimeoutを使用してalertをtrue→false にしています。
工夫した点はcreatedを使用してsetTimeoutを使用することでコンポーネント自体を非同期で読み込むのではなく、コンポーネントの中身を非同期で処理して表示を調節するというところです。