皆さん処理を行っているときにローディング画面出したいなと思ったことありませんか？

これを１から自分で作るってなると中々時間のかかるものです。

そこで出てくるのが僕のおすすめする「Buefy」。

Vue.jsには「Vuetify」というプラグインがあったり、皆さんの知ってる「Bootstrap」があったりします。

ただ、これらを入れたときに他のレイアウトが崩れる経験で頭を抱えている人もいるでしょう。（自分がそうだった）

これを解決してくれるのが、CSSフレームワーク「Buefy」。

フレームワークなので自分で実装して使いやすいようにするといった点では、Vue.jsを勉強し始めたひとにとっては少し物足りない感覚が出てくると思うのですが、僕は断然「Buefy」をおススメします！！

必要な機能だけそろってる。

なので、レイアウトが崩れない。

とりあえずBuefyの魅力を語るのはこの辺にしておいて、まずはこちらの記事初心者必見！サイト制作は楽してなんぼ。CSSフレームワークBuefyの紹介！！でBuefyのパッケージをインストールしてください。

ものの数分で終わります。

そしたら、こちらの公式ドキュメントを開いてください。

ソースコードにはいろいろと書いてありますが、ぶっちゃけ必要な部分は、以下だけです。

<b-loading :is-full-page="isFullPage" v-model="isLoading" :can-cancel="true"></b-loading>

isFullPage：全画面にローディングを適用（true or false）
ほとんどの場合は、全画面でOKです。

v-model：これでローディングを開始したり、止めたりします。(true or false)

can-cancel：ローディング画面が出てきたときに、どこかしらクリックするとローディングを止めれるか（true：止めれる false:止めれない）

本当にこれだけで実装できます。

一応実装例を載せておきますね。

App.vue

<template>
  <div class="loading">
    <b-loading
      v-model="isLoading"
      :is-full-page="true"
      :can-cancel="false"
      style="background-color: rgba(255, 255, 255, 1)"
    ></b-loading>
    <button @click="isLoading = true">ローディング開始</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  }
}
</script>

ちなみにstyle="background-color: rgba(255, 255, 255, 1)"は、デフォルトでは画面が少し透けるので、真っ白にしたかったらこのstyleを付けてあげてください。

めちゃめちゃ簡単でしょ？

皆さんガンガンBuefyを使ってください！

以上、「初心者必見！Vue.jsでローディング画面をたったの２０秒で実装する方法！！」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも毎日初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading