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.
