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 a password strength meter, charts, and file uploader.
vue-password-strength-meter
vue-password-strength-meter is an easy to add password strength meter for our Vue app.
To use it, we run:
npm i vue-password-strength-meter zxcvbn
to install it.
zxcvbn is required for measuring the password strength.
Then we can use it by writing:
<template>
<password v-model="password"/>
</template>
<script>
import Password from "vue-password-strength-meter";
export default {
components: { Password },
data() {
return {
password: null
};
}
};
</script>
We use the password component to add a password input.
We bind to the password state with v-model .
It can be customized with some options.
We can listen to events emitted when the score and feedback events are emitted.
For instance, we can write:
<template>
<password v-model="password" @score="showScore" @feedback="showFeedback"/>
</template>
<script>
import Password from "vue-password-strength-meter";
export default {
components: { Password },
data() {
return {
password: null
};
},
methods: {
showFeedback({ suggestions, warning }) {
console.log(suggestions);
console.log(warning);
},
showScore(score) {
console.log(score);
}
}
};
</script>
It emits the score event with the password strength score.
The feedback event is emitted with the feedback for our password strength.
We can get these things and display them to the user if we want.
We can customize the styles for the strange meter, success and error classes, labels, and more.
vue-simple-uploader
vue-simple-uploader is a file uploader component for Vue apps.
To use it, we run:
npm i vue-simple-uploader
to install it.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import uploader from "vue-simple-uploader";
Vue.use(uploader);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<uploader :options="options" class="uploader-example">
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<p>Drop files here to upload or</p>
<uploader-btn>select files</uploader-btn>
<uploader-btn :attrs="attrs">select images</uploader-btn>
<uploader-btn :directory="true">select folder</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
</template>
<script>
export default {
data() {
return {
options: {
target: "//localhost:3000/upload",
testChunks: false
},
attrs: {
accept: "image/*"
}
};
}
};
</script>
to add the uploader component to our app.
uploader-unsupport is displayed when the required features are unsupported in the browser.
upload-btn is an upload button.
uploader-drop is the dropzone for the file upload.
uploader-list display the list of files uploaded.
options has the options, including the upload URL.
attres have the items we accept.
There are slots that we can populate to customize our app.
vue-highcharts
We can use the vue-highcharts package to add charts easily with our app.
One special feature is that we can add custom markers for points.
To use it, we run:
npm i vue2-highcharts highcharts
to install it with its dependencies.
Then we can use it by writing:
<template>
<div>
<vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
<button @click="load">load</button>
</div>
</template>
<script>
import VueHighcharts from "vue2-highcharts";
const data = {
name: "New York",
marker: {
symbol: "square"
},
data: [
7.0,
6.9,
{
y: 26.5,
marker: {
symbol: "url(http://www.highcharts.com/demo/gfx/sun.png)"
}
}
]
};
export default {
components: {
VueHighcharts
},
data() {
return {
options: {
chart: {
type: "spline"
},
title: {
text: "Monthly Average Temperature"
},
subtitle: {
text: "temperature chart"
},
xAxis: {
categories: ["Jan", "Feb", "Mar"]
},
yAxis: {
title: {
text: "Temperature"
},
labels: {
formatter() {
return this.value + "°";
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
credits: {
enabled: false
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: "#666666",
lineWidth: 1
}
}
},
series: []
}
};
},
methods: {
load() {
const lineCharts = this.$refs.lineCharts;
lineCharts.delegateMethod("showLoading", "Loading...");
lineCharts.addSeries(data);
lineCharts.hideLoading();
}
}
};
</script>
We add the vue-highcharts component to add the chart.
options has all the chart options.
chart has the chart type,
title has the title.
subtitle has the subtitle.
xAxis has the x-axis labels.
yAxis has the y-axis labels.
labels has the labels.
formatter has the function to format the labels.
tooltios enable the tooltips. crosshairs enables the labels on the line.
shared enables the other labels.
plotOptions has the markers.
delegateMethod lets us do various things with our chart.
In our example, we use 'showLoading' to show the loading text.
We get the ref of the chart component and then use the addSeries method to add the chart data.
hideLoading hides the loading text.
Conclusion
vue-password-strength-meter provides us with a useful password strength meter.
vue-simple-uploader provides us with a file upload component.
vue-highcharts is a chart library.
