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 how the best packages for adding a rich text editor, file upload control, spinner, and progress bar.
Vue2Editor
Vue2Editor is an easy to use rich text editor component based on Quill.
To install it, we can run:
npm i vue2-editor
Then we can use it by writing:
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
<p v-html="content"></p>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: "<h1>hello</h1>"
};
}
};
</script>
We have the vue-editor component which binds to the content state with v-model .
It comes with common features like bold, italic, underline, different style text, lists, images, videos, links, and more.
There are many other customizations like placeholders.
It also emits events for blur, focus, adding images, changing selection, and more.
We can also change how images are uploaded.
vue-spinner
vue-spinner is a spinner component so that we display something when our data is loading.
To use it, we first install it by running:
npm i vue-spinner
Then we can use it by writing:
<template>
<div id="app">
<pulse-loader loading :color="color"></pulse-loader>
</div>
</template>
<script>
import PulseLoader from "vue-spinner/src/PulseLoader.vue";
export default {
components: {
PulseLoader
},
data() {
return {
color: "green"
};
}
};
</script>
We set the loading prop to indicate that it’s loading.
color sets the color.
It comes with many other styles like grid-loader , clip-loader , and much more.
vue2-dropzone
vue2-dropzone is a dropzone component that we can use to add a file upload input to our Vue app.
To use it, we run:
npm i vue2-dropzone
Then we can use it by writing:
<template>
<div id="app">
<vue-dropzone ref="dropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
</div>
</template>
<script>
import vue2Dropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css";
export default {
name: "app",
components: {
vueDropzone: vue2Dropzone
},
data() {
return {
dropzoneOptions: {
url: "https://example.com",
thumbnailWidth: 150,
maxFilesize: 0.5,
headers: { "Header": "header value" }
}
};
}
};
</script>
We use the vue-dropzone component with some options.
url is the URL to upload to.
thumbnailwidth is the width of the thumbnail.
maxFilesize is the maximum file size of the file selected,.
headers is the headers we send with the request.
vue-count-to
vue-count-to is a component that lets us add animation to count up or down to a specific number.
To install it, we run:
npm i vue-count-to
Then we can use it by writing:
<template>
<countTo :startVal="startVal" :endVal="endVal" :duration="3000"></countTo>
</template>
<script>
import countTo from "vue-count-to";
export default {
components: { countTo },
data() {
return {
startVal: 0,
endVal: 2020
};
}
};
</script>
We just set the startVal prop to set the starting value of the animation.
endVal sets the end value of the animation.
duration is the animation duration.
vue-progressbar
vue-progressbar is a progress bar component.
To use it, first we install it by running:
npm i vue-progressbar
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueProgressBar from "vue-progressbar";
const options = {
color: "green",
failedColor: "red",
thickness: "5px",
transition: {
speed: "1.2s",
opacity: "1.6s",
termination: 300
},
autoRevert: true,
location: "top",
inverse: false
};
Vue.use(VueProgressBar, options);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<vue-progress-bar></vue-progress-bar>
</div>
</template>
<script>
export default {
mounted() {
this.$Progress.finish();
},
created() {
this.$Progress.start();
}
};
</script>
We have the options object with the options that we set for the progress bar.
color is the bar color.
failedColor is the color when loading fails.
thickness is the thickness of the bar.
transition is the speed of the animation.
opacity is the opacity of the bar.
termination is when it terminates.
autoRevert means that it reverses automatically when loading fails.
location is the location of the bar.
inverse is inverting the direction.
Conclusion
Vue2Editor is the rich text editor.
vue2-dropzone is a file upload widget.
vue-count-to provides us with a way to animate number displays.
vue-progressbar lets us display a progress bar.
vue-spinner is a spinner we can add.
