Categories
Top Vue Packages

Top Vue Packages for Adding Wizards, Changing Title and Description, and More

Spread the love

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.

vue-headful

We can use the vue-headful package to set the title and meta description of our app.

We can install it by running:

npm i vue-headful

Then we write:

<template>
  <div>
    <vue-headful title="headful title" description="headful description"/>
  </div>
</template>

to use it.

vue-headful is the component to set the metadata.

title sets the title.

description sets the meta tag’s description attribute.

We can also set other attributes of the meta tag and the link tag.

vue-simple-calendar

vue-simple-calendar is a calendar component for Vue apps.

To use it, we run:

npm i vue-simple-calendar

to install the package.

Then we write:

<template>
  <div id="app">
    <calendar-view :show-date="showDate">
      <calendar-view-header
        slot="header"
        slot-scope="t"
        :header-props="t.headerProps"
        [@input](http://twitter.com/input "Twitter profile for @input")="setShowDate"
      />
    </calendar-view>
  </div>
</template>
<script>
import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
import "vue-simple-calendar/static/css/default.css";
import "vue-simple-calendar/static/css/holidays-us.css";

export default {
  name: "app",
  data() {
    return { showDate: new Date() };
  },
  components: {
    CalendarView,
    CalendarViewHeader
  },
  methods: {
    setShowDate(d) {
      this.showDate = d;
    }
  }
};
</script>

to use it.

We’ve to import the component and CSS files.

We then use the calendar-view for adding the calendar.

And we use the calendar-view-header component to add the header.

showDate sets the default date to show.

vue-easy-pie-chart

vue-easy-pie-chart lets us display a circular percentage display to our Vue app.

We install it by running:

npm i vue-easy-pie-chart

Then we write:

<template>
  <div>
    <vue-easy-pie-chart :percent="70"></vue-easy-pie-chart>
  </div>
</template>
<script>
import VueEasyPieChart from "vue-easy-pie-chart";
import "vue-easy-pie-chart/dist/vue-easy-pie-chart.css";

export default {
  components: { VueEasyPieChart }
};
</script>

to use it.

We set the percent to display the percentage.

Also, we’ve import the CSS to make it look correct.

vue-momentjs

vue-momentjs is a Vue plugin wrapper for moment.js.

We can install it by running:

npm install moment vue-momentjs

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import moment from "moment";
import VueMomentJS from "vue-momentjs";

Vue.use(VueMomentJS, moment);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>{{date}}</div>
</template>
<script>
export default {
  data() {
    return {
      date: this.$moment(new Date()).format("YYYY-MM-DD")
    };
  }
};
</script>

We use the this.$moment property to call the moment function.

Then we can call any other method of the moment object with it.

Conclusion

vue-good-wizard is a wizard component for Vue.

vue-headful lets us change the title and meta description for our Vue app.

vue-momentjs is a small wrapper for moment.

vue-easy-pie-chart is a percentage display.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published.