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

環境
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の設定を行います

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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
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
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 環境構築の結果

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Successfully created project nuxtdemo
To get started:
cd nuxtdemo
yarn dev
To build & start for production:
cd nuxtdemo
yarn build
yarn start
Successfully created project nuxtdemo To get started: cd nuxtdemo yarn dev To build & start for production: cd nuxtdemo yarn build yarn start
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インストール

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
c:\nuxtdemo>yarn add vue-wizard-steps
c:\nuxtdemo>yarn add vue-wizard-steps
c:\nuxtdemo>yarn add vue-wizard-steps

3.vue-wizard-steps使い方

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import Vue from 'vue'
import WizardSteps from 'vue-wizard-steps';
Vue.component("wizard-steps", WizardSteps);
import Vue from 'vue' import WizardSteps from 'vue-wizard-steps'; Vue.component("wizard-steps", WizardSteps);
import Vue from 'vue'
import  WizardSteps  from  'vue-wizard-steps';

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
modules: [
],
plugins: [
{
src: '@/plugins/plugin',
mode: 'client'
}
],
modules: [ ], plugins: [ { src: '@/plugins/plugin', mode: 'client' } ],
modules: [
],
plugins: [
  {
    src: '@/plugins/plugin',
    mode: 'client'
  }
],

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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/ │
│ │
╰───────────────────────────────────────╯
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/ │ │ │ ╰───────────────────────────────────────╯
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/   │
   │                                       │
   ╰───────────────────────────────────────╯

 

 

 

Nuxt.js

Posted by arkgame