くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Nuxt.jsでvue-loadersを使ってみた

ローディングアニメーションを用意しようと見てたら、Loaders.cssが良さそうだなと!
vue用のvue-loadersがあったので、Nuxt.jsに取り込んでみたときの備忘録

Loaders.css

インストール

$ 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>

以上!!簡単♪

参考にしたサイト様