Nuxt.js ライブラリ「vue-ellipse-progress 」をインストールする方法

2024年1月6日

環境
node V12.16.3
npm 6.14.4
nuxt 2.12.2
CentOS 8

1.Nuxt.js環境を構築する
nuxtappという名前でプロジェクトを作成します。

npx create-nuxt-app nuxtapp

下記の設定で構築します。
create-nuxt-app v2.15.0

2.外部IPを許可する
作成したプロジェクトnuxtappの配下にあるpackage.jsonに下記を追加します。

"config": {
  "nuxt": {
    "host": "0.0.0.0",
    "port": "3000"
  }
},

3.vue-ellipse-progressインストール
作成したプロジェクトに移動
# cd nuxtapp

## インストール

yarn add vue-ellipse-progress

4.plugins配下にplugin.jsを作成し、下記の通りに編集します。

import Vue from 'vue'
import VueEllipseProgress from 'vue-ellipse-progress'
Vue.use(VueEllipseProgress)

プロジェクト配下にあるnuxt.config.jsに下記のコードを追加します。

plugins: [
    {
      src: '@/plugins/plugin',
      mode: 'client'
    }
  ],