Nuxt.jsでvue-form-wizardを使ってステップフォームを実装してみました。

はじめに

nuxt.jsでvue-form-wizardを使って簡単にステップフォームを実装してみました。

目次

1. NPMパッケージをインストール
2. vue-form-wizard呼び出し
3. component登録
4. ステップ登録
5. 終わりに

1. NPMパッケージをインストール

$ npm i -D vue-form-wizard

参考リンクです。
https://binarcode.github.io/vue-form-wizard/

２. vue-form-wizard呼び出し

import {FormWizard, TabContent} from 'vue-form-wizard'

vue-form-wizardを使うためには上記のようにimportが必要です。

3.component登録

  components: {
      FormWizard,
      TabContent,
  }

importした変数をそのままcomponentsに登録をします。

上記のimportとcomponents登録をすると下記のようにな設計になります。

index.vue

<template lang="pug">
   .container
      h2 {{ pageName }}
</template>
<script>
import {FormWizard, TabContent} from 'vue-form-wizard'
export default {
  components: {
        FormWizard,
        TabContent,
  }
  data(){
    return{
       pageName: 'contact',
       stepForm : {
          stepOne : {
            name : ''
          },
          stepTwo : {
            mail : ''
          },
        }
      }
    }
</script>    

4.ステップ登録

ステップは３ステップで最終画面が確認画面となります。
イメージはtab-contentの中に設計したinputを入れ込む形です。

form-wizard
  tab-content(
    title:'ONESTEP'
  )
  tab-content(
    title:'TWOSTEP'
  )
  tab-content(
    title:'CONFIRM'
  )

下記のように設計をしました。vue-form-wizardのいいところは tab-contentを追加するだけでステップが増えるので簡単にステップを増やすことができます。

index.vue

<template lang="pug">
   .container
      h2 {{ pageName }}
        form-wizard
          tab-content(
            title:'ONESTEP'
          )
            .inputBox
              input(
                type='text',
                v-model='stepForm.oneStep.name'
              )
          tab-content(
            title:'TWOSTEP'
          )
            .inputBox
              input(
                type='email', 
                v-model='stepForm.stepTwo.mail'
              )
          tab-content(
            title:'CONFIRM'
          )
            .confirm
              name ： {{ stepForm.oneStep.name }}
              email ： {{ stepForm.oneStep.name }}
          buttonv( 
              slot="prev"
              ) 前のステップへ
          button( 
              slot="next"
              ) 次のステップへ
          button(
              type="button" 
              slot="finish") 送信
</template>

完成コードが下記になります。

index.vue

<template lang="pug">
   .container
      h2 {{ pageName }}
        form-wizard
          tab-content(
            title:'ONESTEP'
          )
            .inputBox
              input(
                type='text',
                v-model='stepForm.oneStep.name'
              )
          tab-content(
            title:'TWOSTEP'
          )
            .inputBox
              input(
                type='email', 
                v-model='stepForm.stepTwo.mail'
              )
          tab-content(
            title:'TWOSTEP'
          )
            .confirm
              name ： {{ stepForm.oneStep.name }}
              email ： {{ stepForm.oneStep.name }}
          button( 
              slot="prev"
              ) 前のステップへ
          button( 
              slot="next"
              ) 次のステップへ
          button(
              type="button" 
              slot="finish") 送信
</template>

<script>
import {FormWizard, TabContent} from 'vue-form-wizard'
export default {
  components: {
        FormWizard,
        TabContent,
  }
  data(){
    return{
       pageName: 'contact',
       stepForm : {
          stepOne : {
            name : ''
          },
          stepTwo : {
            mail : ''
          },
        }
      }
    }
</script>  

5.終わりに

vue-form-wizardだけ使って簡単にステップフォーム実装ができました。
ただし、上記のコードはバリデーション機能は入れてないのでformとして使うためにはバリデーション機能も入れた方が完成が度高くなるかと思います。