Categories
Top Vue Packages

Top Vue Packages for Adding Croppers, Calendars, and Lodash

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.