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 icons, rich text editor, image upload, and event calendar.
vue-fontawesome
vue-fontawesome is a set of components we can use to add Font Awesome icons into our Vue app.
To use it, we run:
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome
to install all the required packages.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
library.add(faUserSecret);
Vue.component("font-awesome-icon", FontAwesomeIcon);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<font-awesome-icon icon="user-secret"/>
</div>
</template>
<script>
export default {};
</script>
We call library.add to register the icon we want to use.
We use the font-awesome-icon with the icon prop to specify the icon we want to use.
It works with both the free and pro versions of Font Awesome.
We just have to install different packages for the pro version.
vue-event-calendar
vue-event-calendar is a very simple calendar library for Vue.
To use it, we run:
npm i vue-event-calendar
to install it.
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import "vue-event-calendar/dist/style.css";
import vueEventCalendar from "vue-event-calendar";
Vue.use(vueEventCalendar, { locale: "en" });
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<vue-event-calendar :events="demoEvents"></vue-event-calendar>
</template>
<script>
export default {
data() {
return {
demoEvents: [
{
date: "2020/11/12",
title: "eat"
},
{
date: "2020/12/15",
title: "drink",
desc: "description",
customClass: "disabled highlight"
}
]
};
}
};
</script>
to use it.
We use the vue-event-calendar to add a calendar to our app.
Then we set the events prop to an array with objects that have the date and title properties to display events.
date is the date of the event. title is the title of the event.
desc is the description.
customClass are classes that we can add to let us style it with our own CSS.
It emits events when the day or month changed, so we can add listeners to listen to those.
We can change the locale with the locale option.
And we can navigate months and dates with the this.$EventCalendar object.
We can write:
this.$EventCalendar.nextMonth()
to move to the next month and:
this.$EventCalendar.preMonth()
to move to the previous month.
And we can write:
this.$EventCalendar.toDate('2020/11/12')
to move to a given date.
vue-img-inputer
vue-img-inputer is a file uploader library for Vue apps.
To use it, we run:
npm i vue-img-inputer
to install it.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import ImgInputer from "vue-img-inputer";
import "vue-img-inputer/dist/index.css";
Vue.component("ImgInputer", ImgInputer);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<img-inputer v-model="file" theme="light" size="large"/>
</template>
<script>
export default {
data(){
return {
file: undefined
}
}
};
</script>
to use it.
We register the component and add the CSS.
Then we use the img-inputer component and bind the selected file with v-model .
There are also many other options we can change, like text for errors, URL for images, icons, and more.
It also emits events for when the file changed or file size exceeded.
vue-pell-editor
vue-pell-editor is a rich text editor for Vue apps.
To use it, we install it by running:
npm i vue-pell-editor
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import VuePellEditor from "vue-pell-editor";
Vue.use(VuePellEditor);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<vue-pell-editor
v-model="editorContent"
:actions="editorOptions"
:placeholder="editorPlaceholder"
:style-with-css="false"
default-paragraph-separator="p"
/>
<p v-html="editorContent"></p>
</div>
</template>
<script>
export default {
data: () => ({
editorContent: "",
editorOptions: [
"bold",
"underline",
{
name: "italic",
result: () => window.pell.exec("italic")
},
{
name: "custom",
icon: "<b><u><i>C</i></u></b>",
title: "Custom Action",
result: () => console.log("YOLO")
},
{
name: "image",
result: () => {
const url = window.prompt("image URL");
if (url) window.pell.exec("insertImage", ensureHTTP(url));
}
},
{
name: "link",
result: () => {
const url = window.prompt("link URL");
if (url) window.pell.exec("createLink", ensureHTTP(url));
}
}
],
editorPlaceholder: "Write something amazing..."
}),
methods: {}
};
</script>
to use it.
We add buttons individually with the editorOptions , which we set as the value of the actions prop.
placeholder has the placeholder.
v-model binds to the entered content.
style-with-css indicates whether we want to style with CSS.
Conclusion
vue-fontawesome lets us use Font Awesome icons. vue-event-calendar displays an event calendar. vue-img-inputer lets us add image upload capability to our app, vue-pell-editor is a rich text editor for Vue apps.
