Using Bulma Steps in Vue.js & Nuxt

steps.vue

<template>
  <div
    ref="stepsApp"
    class="steps"
  >
    <div class="step-item is-active is-success">
      <div class="step-marker">
        1
      </div>
      <div class="step-details">
        <p class="step-title">
          Account
        </p>
      </div>
    </div>
    <div class="step-item">
      <div class="step-marker">
        2
      </div>
      <div class="step-details">
        <p class="step-title">
          Profile
        </p>
      </div>
    </div>
    <div class="step-item">
      <div class="step-marker">
        3
      </div>
      <div class="step-details">
        <p class="step-title">
          Social
        </p>
      </div>
    </div>
    <div class="step-item">
      <div class="step-marker">
        4
      </div>
      <div class="step-details">
        <p class="step-title">
          Finish
        </p>
      </div>
    </div>
    <div class="steps-content">
      <div class="step-content has-text-centered is-active">
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Username</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input
                  id="username"
                  class="input"
                  name="username"
                  type="text"
                  placeholder="Username"
                  autofocus
                  data-validate="require"
                >
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Password</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control has-icon has-icon-right">
                <input
                  id="password"
                  class="input"
                  type="password"
                  name="password"
                  placeholder="Password"
                  data-validate="require"
                >
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Confirm password</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control has-icon has-icon-right">
                <input
                  id="password_confirm"
                  class="input"
                  type="password"
                  name="password_confirm"
                  placeholder="Confirm password"
                  data-validate="require"
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="step-content has-text-centered">
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Firstname</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input
                  id="firstname"
                  class="input"
                  name="firstname"
                  type="text"
                  placeholder="Firstname"
                  autofocus
                  data-validate="require"
                >
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Last name</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control has-icon has-icon-right">
                <input
                  id="lastname"
                  class="input"
                  type="text"
                  name="lastname"
                  placeholder="Last name"
                  data-validate="require"
                >
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Email</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control has-icon has-icon-right">
                <input
                  id="email"
                  class="input"
                  type="email"
                  name="email"
                  placeholder="Email"
                  data-validate="require"
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="step-content has-text-centered">
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Facebook account</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input
                  id="facebook"
                  class="input"
                  name="facebook"
                  type="text"
                  placeholder="Facebook account url"
                  autofocus
                  data-validate="require"
                >
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Twitter account</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input
                  id="twitter"
                  class="input"
                  name="twitter"
                  type="text"
                  placeholder="Twitter account url"
                  autofocus
                  data-validate="require"
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="step-content has-text-centered">
        <h1 class="title is-4">
          Your account is now created!
        </h1>
      </div>
    </div>
    <div class="steps-actions">
      <div class="steps-action">
        <a
          href="#"
          data-nav="previous"
          class="button is-light"
        >Previous</a>
      </div>
      <div class="steps-action">
        <a
          href="#"
          data-nav="next"
          class="button is-light"
        >Next</a>
      </div>
    </div>
  </div>
</template>

<script>
import StepsWizard from 'bulma-steps/dist/js/bulma-steps.js'
export default {
  data () {
    return {}
  },
  mounted () {
    StepsWizard.attach(this.$refs.stepsApp.el)
  }
}
</script>