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 to add a cropper, calendar, full-year date picker, and Lodash.
vue-cropperjs
We can use the vue-cropperjs package to add an image cropper to our Vue app.
To use it, first we install it by running:
npm i vue-cropperjs
Then we can use it by writing:
<template>
<div>
<vue-cropper ref="cropper" src="https://placekitten.com/200/200" alt="Source Image"></vue-cropper>
</div>
</template>
<script>
import VueCropper from "vue-cropperjs";
import "cropperjs/dist/cropper.css";
export default {
components: { VueCropper }
};
</script>
We just have to import and register the VueCropper component.
Then we set the image with the src prop.
It emits the ready , cropstart , cropmove , cropend , crop , and zoom events.
So we can do anything we want.
Also, we can use it programmatically by calling methods from the ref.
For instance, we can write:
this.$refs.cropper.zoom(1.5);
to zoom in.
vue-lodash
vue-lodash is a wrapper for Lodash that we can use in our Vue apps.
To install it, we run:
npm i vue-lodash lodash
Lodash is a required dependency.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueLodash from "vue-lodash";
import lodash from "lodash";
Vue.use(VueLodash, { name: "custom", lodash });
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
We registered the VueLodash plugin. The name is the property name that we can invoke Lodash with.
lodash is the library itself.
Then in our component, we can write:
<template>
<div></div>
</template>
<script>
export default {
mounted() {
console.log(this.lodash.random(20));
console.log(this._.random(20));
console.log(this.custom.random(20));
}
};
</script>
We can invoke Lodash with the lodash , _ , or custom property as we defined in the name property of the object we passed into Vue.use .
vue-material-year-calendar
vue-material-year-calendar is a useful package for letting us add a full year calendar.
It displays all months on the screen instead of one like most date pickers.
To install it, we run:
npm i vue-material-year-calendar
Then we can use it by writing:
<template>
<YearCalendar
v-model="year"
:activeDates.sync="activeDates"
[@toggleDate](http://twitter.com/toggleDate "Twitter profile for @toggleDate")="toggleDate"
prefixClass="prefix"
:activeClass="activeClass"
></YearCalendar>
</template>
<script>
import YearCalendar from "vue-material-year-calendar";
export default {
components: { YearCalendar },
data() {
return {
year: 2020,
activeDates: [
{ date: "2020-02-13" },
{ date: "2020-02-14", className: "red" },
{ date: "2020-02-15", className: "blue" },
{ date: "2020-02-16" }
],
activeClass: "active"
};
},
methods: {
toggleDate(dateInfo) {
console.log(dateInfo);
}
}
};
</script>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
.active {
background: yellow;
}
</style>
We use the YearCalendar component.
The toggleDate event is set to the toggleDate method to log the date.
prefixClass lets us add a prefix to the wrapper class.
activeDates has sets the days to be highlighted. We make the highlight with our own class.
v-model binds to year to set the initial year.
vue-full-calendar
vue-full-calendar is a calendar widget that we can add to a Vue app.
To install it, we run:
npm i vue-full-calendar moment jquery
Moment and jQuery are a required dependencies
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import FullCalendar from "vue-full-calendar";
import "fullcalendar/dist/fullcalendar.css";
Vue.use(FullCalendar);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
We register the plugin and import the CSS.
App.vue
<template>
<full-calendar :events="events"></full-calendar>
</template>
<script>
import { FullCalendar } from "vue-full-calendar";
export default {
components: {
FullCalendar
},
data() {
return {
events: [
{
title: "eat",
start: "2020-01-01"
},
{
title: "drink",
start: "2020-01-05",
end: "2020-01-07"
},
{
title: "sleep",
start: "2020-01-09T12:30:00",
allDay: false
}
]
};
}
};
</script>
We use the full-calendar component.
We pass in an array of events with the title, start, and end dates in each entry.
Also, we can set the allDay property to add a full-day event.
Conclusion
vue-cropperjs lets us add an image cropped to our Vue app.
The vue-full-calendar package is a calendar widget we can use to display events
The vue-material-year-calendar is a unique date picker in that it displays the whole year.
vue-lodash is a Vue wrapper for Lodash.
