【Vue.js】ローディング画面を実装する

はじめに

vue-loading-templateモジュールを用いて、Vue.jsのアプリにローディング画面を実装しました

Vue.jsのアプリにはVuetifyを使用しています

適用したVue.jsのアプリはこちら↓

. vue-loading-templateのインストール

$ npm add vue-loading-template

src/App.vue

App.vue

<template>
  <v-app id="inspire" :style="{background: $vuetify.theme.dark}" >
　　<!-- ローディング -->
    <Loading v-show="isLoading"></Loading>
    <v-main
      :style="{width:'90%', margin: '3vh auto'}"
      v-show="!isLoading"
    >
      <!-- 省略 -->
    </v-main>
    <v-footer
      color="grey darken-2"
      padless
      v-show="!isLoading"
      >
      <v-col
        class="text-center white--text"
        cols="12"
      >
        {{ new Date().getFullYear() }} — <strong>Komekami</strong>
      </v-col>
    </v-footer>
  </v-app>
</template>

<script>
// Loadingコンポーネントの読み込み
import Loading from '@/components/Loading'
export default {
  data: () => ({
    isLoading: true,
    drawer: null,
    items: [
      { title: 'Top', icon: 'mdi-view-dashboard', link: '/' },
      { title: 'Profile', icon: 'mdi-account', link: '/profile' },
      { title: 'Gallery', icon: 'mdi-image', link: '/gallery' },
      { title: 'Contact', icon: 'mdi-forum', link: '/contact' }
    ],
    right: null
  }),
  // Loading切り替え処理
  mounted () {
    setTimeout(() => {
      this.isLoading = false
    }, 1000)
  },
  components: {
    Loading
  }
}
</script>

Point

• ローディング画面コンポーネントをLoadingとして読み込んでいます

• 変数isLoadingを用いてtrueかfalseかでローディング画面の表示/非表示を行っています。

• mountedを使用し切り替えを行っています。

• mountedはDOMの作成完了時にisLoading=falseとなり、ローディング画面が非表示になります。

• メイン部(v-main)とフッター部(v-footer)は変数isLoadingがfalseで描画(v-show)されます。

src/components/Loading.vue

ローディング画面のコンポーネントです。

Loading.vue

<template>
  <div v-show="isLoading">
    <div class="fullview">
      <div class="loading-spacer"></div>
        <vue-loading
          type="beat"
          color="#304686"
          :size="{ width: '100px', height: '100px' }"
          >
        </vue-loading>
    </div>
  </div>
</template>

<script>
import { VueLoading } from 'vue-loading-template'

export default {
  name: 'isLoading',
  data () {
    return {
      isLoading: true
    }
  },
  components: {
    VueLoading
  }
}
</script>

<style>
.fullview {
  width: 100%;
  height: 100%;
  background:black;
  position: fixed;
  top: 0;
  left: 0;
}
.loading-spacer {
  height: 40%;
}
</style>

Point

• VueLoadingをインポート
• <vue-loading>内でLoadingの各種設定を行っています

今回はローディングの動き方をtype="beat"にしました
他にも色々typeがあるのでvue-loading-templateをチェックしてみてください

さいごに

モジュールをインストールすることで簡単にローディング画面を実装することができました。

SPAは初回読み込み時に時間がかかりがちなので、ローディング画面を実装するとサイト訪問者のストレスも軽減されるのではないかと思います。

参考