木はじめにNuxt.jsでBuefyを使っている前提となりますが、axiosで何かしらのファイルをダウンロードしている間などユーザに処理中であることを示すためにローディング画像を表示するよう実装しました。その手順をまとめます。非常に簡単に実装できます。Buefyについては以下をご覧ください。Vue.jsアプリの見た目を良くするコンポーネントセットBuefyを使うための準備BuefyはBulmaというUIコンポーネントセットをベースにしたVue.js用のUIコンポーネントセットです。Bootstrapのようにあらかじめ用意されたHTMLタグやCSSクラスを使うことで簡単にそれなりの見た目になります。ここでは、Vue.jsアプリでBuefyを使えるようにするための準備手順と、最後にmarginやpadding用のクラスをBuefyに追加する方法をメモします。www.virment.comできるようになること以下のGIF画像のように、ファイルのダウンロードボタンをクリックすると、ダウンロードが完了するまでぐるぐるとローディング画像が表示されます。前提と環境ここでは、Nuxt.jsにてnuxt-buefyをインストールして使っている前提ですが、おそらくVue.jsや他のコンポーネントセットでも対応を見れば分かると思います。0.3.14nuxt-buefyの公式リポジトリは以下です。nuxt-buefy.github.comストア側の処理まず、ストア側のコードを以下に載せます。以下はstore/file.jsというストアを適当に用意しています。(...省略...)}上記のコードは、axiosを使用して何かしらのWebサイトやAPIからファイルをダウンロードする処理を含んでいます。そのaxiosの処理開始前にupdateLoadingでローディング画像を表示するフラグをtrueに設定し、axiosの処理が全て完了したらローディング画像を非表示にするためにfinallyの中でupdateLoadingをfalseに設定しています。あとは、このdownloadFileを使いたいコンポーネントファイルでローディング画像を表示するための記述を少しだけ追記します。コンポーネントにローディング画像表示部分を追記する以下のように<b-loading>というBuefyのローディング用のコンポーネントを追記します。}}</script>上記で追加している要素は以下です。/>Buefyのローディング画像表示用のコンポーネント。is-full-pageはtrueならばローディング画像をページ全体に表示、falseならば<b-loading>の親要素内でローディング画像を表示する。()でストアのローディング状態を表すストア変数loadingを監視...mapActionsでdownloadFileをコンポーネントファイル内で使えるようにするまとめBuefy頼りなところもありますが、とても簡単に実装できます。Nuxt.jsからGoogleスプレッドシートのデータを読み込んだり書き込んだりしたのでその手順をまとめます。コメントをキャンセルメールアドレスが公開されることはありません。virtualiment。