【Vue.js】ローディング画面の実装方法（サンプルコード付き）

はじめに

Vue.jsでローディング画面を実装する方法をサンプルコード付きでまとめました。

今回ローディングのモジュールはvue-loading-templateを使っています。

デモはこちらから確認出来ます。

環境

OS:macOS Catalina 10.15.1Vue:2.6.10vue-cli:4.1.1vue-router:2.6.10vuex:3.1.2vuetify:2.1.0

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

$ yarn add vue-loading-template

1.`src/App.vue`

App.vue

<template><v-app><Loadingv-show="loading"></Loading><Homev-show="!loading"></Home></v-app></template><script>importLoadingfrom'@/components/Loading'importHomefrom'./views/Home'exportdefault{name:'App',data(){return{loading:true,}},mounted(){setTimeout(()=>{this.loading=false;},1000);},components:{Loading,Home,},};</script>

前提

Vuetifyを使用しているので、<v-app>でくくられている
Loadingはローディング画面コンポーネント
Homeはアプリケーション本体をまとめているコンポーネント

ローディング画面の切り替え方法

v-showを使用し、変数loadingがtrueかfalseかでローディング画面の表示・非表示を行う
切り替えはmountedを使用
mountedはDOMの作成が完了した段階で発動するので、
DOMの作成が完了した段階でloadingがfalseになり、ローディング画面が非表示になる

2.`src/components/Loading.vue`

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

Loading.vue

<template><divv-show="loading"><divclass="fullview"><divclass="loading-spacer"></div><vue-loadingtype="spiningDubbles"color="#aaa":size="{ width: '100px', height: '100px' }"
        >
      </vue-loading></div></div></template><script>import{VueLoading}from'vue-loading-template'exportdefault{name:'loading',components:{VueLoading,},}</script><style>.fullview{width:100%;height:100%;background:#fefefe;position:fixed;top:0;left:0;}.loading-spacer{height:30%;}</style>