Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at the best packages for adding wizards, changing titles and meta attributes, using Moment, and adding percentage displays.

vue-good-wizard

vue-good-wizard is a wizard plugin for Vue apps.

To use it, we install it by writing:

npm i vue-good-wizard

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueGoodWizard from "vue-good-wizard";

Vue.use(VueGoodWizard);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <vue-good-wizard :steps="steps" :onNext="nextClicked" :onBack="backClicked">
      <div slot="page1">
        <h4>Step 1</h4>
        <p>This is step 1</p>
      </div>
      <div slot="page2">
        <h4>Step 2</h4>
        <p>This is step 2</p>
      </div>
      <div slot="page3">
        <h4>Review</h4>
        <p>review</p>
      </div>
    </vue-good-wizard>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      steps: [
        {
          label: "Step 1",
          slot: "page1"
        },
        {
          label: "Step 2",
          slot: "page2"
        },
        {
          label: "Review",
          slot: "page3",
          options: {
            nextDisabled: true
          }
        }
      ]
    };
  },
  methods: {
    nextClicked(currentPage) {
      console.log("next clicked", currentPage);
      return true;
    },
    backClicked(currentPage) {
      console.log("back clicked", currentPage);
      return true;
    }
  }
};
</script>

We use the vue-good-wizard component to create the wizard.

The steps prop has an array with the slot names and labels.

The slot property of each entry has the slots.

Then we populate the slots we defined by putting whatever we want in it.

options has options we can set on each step.

It also emits events and we can set listeners for them.

#software-development #javascript #web-development #programming #vue #vue.js