「Nuxt.js」ライブラリvue-wizard-stepsを使用してプログレスバーを作成する

2022年7月18日

環境
Windows 10 Home 64bt
node v14.18.3
npm 6.14.15

1.Nuxt.jsを環境構築します
1.1 「nuxtdemo」という名前でプロジェクトを作成してます
c:\>npx create-nuxt-app nuxtdemo

1.2 create-nuxt-appの設定を行います

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in nuxtdemo
? Project name: nuxtdemo
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username?
? Version control system: Git
略
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 does not receive

1.3 環境構築の結果

Successfully created project nuxtdemo

To get started:

      cd nuxtdemo
      yarn dev

To build & start for production:

      cd nuxtdemo
      yarn build
      yarn start

2.vue-wizard-stepsをインストールします
作成したプロジェクトに移動します
c:\>cd nuxtdemo
vue-wizard-stepsインストール

c:\nuxtdemo>yarn add vue-wizard-steps

3.vue-wizard-steps使い方

「C:\nuxtdemo\plugins」フォルダを作成します

plugin.jsに以下のコードを編集します

import Vue from 'vue'
import  WizardSteps  from  'vue-wizard-steps';

Vue.component("wizard-steps", WizardSteps);

nuxt.config.jsに以下のコードを編集します

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

pages配下にindex.vueに以下のコードを編集します

<template>
  <div class="container">
    <wizard-steps :sections="sections"  />
  </div>
</template>

<script>
export default {
  data() {
    return {
      sections: {
        titles: ["メールアドレス入力", "パスワード入力", "確認"],
        fillCount: 2,
      },
    };
  },
};
</script>

<style>
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

4.yarn起動

c:\nuxtdemo>yarn dev

c:\nuxtdemo>yarn dev
yarn run v1.22.17
$ nuxt

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯