ローディングアニメーションを用意しようと見てたら、Loaders.cssが良さそうだなと!
vue用のvue-loadersがあったので、Nuxt.jsに取り込んでみたときの備忘録
インストール
$ npm install --save vue-loaders
プラグインファイルを作る
plugins/vue-loaders.ts
を以下の内容で作成
import Vue from "vue"; import "vue-loaders/dist/vue-loaders.css"; import VueLoaders from "vue-loaders"; Vue.use(VueLoaders);
nuxt.config.ts
に設定
const config: NuxtConfiguration = { // ...略 plugins: ["~/plugins/vue-loaders"], // ...略 }
テンプレートで使う
好きなとこに、これを入れる
<vue-loaders name="ball-beat" color="red" scale="1"></vue-loaders> // or <vue-loaders-ball-beat color="red" scale="1"></vue-loaders-ball-beat>
以上!!簡単♪