Top Vue Packages for Adding Image Croppers, Printable Elements, Month Pickers, and Modals

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 image croppers, creating printable elements, monthly pickers, and modals.

vue-html-to-paper

We can use vue-html-to-paper to make our Vue components printable on paper.

To use it, we run:

npm i vue-html-to-paper

to install it.

Then we write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueHtmlToPaper from "vue-html-to-paper";
Vue.use(VueHtmlToPaper);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <div id="printMe">
      <h1>Print me!</h1>
    </div>
    <button @click="print">print</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      output: null
    };
  },
  methods: {
    print() {
      this.$htmlToPaper("printMe");
    }
  }
};
</script>

to use it.

We register the plugin so that we can all $htmlToPaper with the ID of the element that we want to make printable.

Then when we click the print button, we’ll see a popup with the content and the print dialog box opening.

We can customize it with our own CSS:

import Vue from "vue";
import App from "./App.vue";
import VueHtmlToPaper from "vue-html-to-paper";
const options = {
  name: "_blank",
  specs: ["fullscreen=yes", "titlebar=yes", "scrollbars=yes"],
  styles: [
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  ]
};

Vue.use(VueHtmlToPaper, options);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

We apply the styles from the Bootstrap 4 stylesheet and we set fullscreen to yes to enable full screen.

titlebar includes the title bar.

scrollbar includes the scroll bar.

$htmlToPaper also takes a callback that’s called after printing to run code then.

vue-monthly-picker

vue-monthly-picker is a month picker package for Vue apps.

To use it, we run:

npm i vue-monthly-picker moment

to install it.

Moment is a required dependency.

Then we use it by writing:

<template>
  <div>
    <vue-monthly-picker v-model="selectedMonth"></vue-monthly-picker>
    <p>{{selectedMonth}}</p>
  </div>
</template>

<script>
import VueMonthlyPicker from "vue-monthly-picker";

export default {
  components: {
    VueMonthlyPicker
  },
  data() {
    return {
      selectedMonth: undefined
    };
  }
};
</script>

We use the vue-monthly-picker to add a date picker.

v-model binds the selected month to the selectedMonth state.

Vodal

Vodal is a modal component that’s made for Vue apps.

To use it, we run:

npm i vodal

to install it.

Then we can use it by writing:

<template>
  <div>
    <vodal :show="show" animation="rotate" @hide="show = false">
      <div>vue modal.</div>
    </vodal>
  </div>
</template>

<script>
import Vodal from "vodal";
import "vodal/common.css";
import "vodal/rotate.css";

export default {
  components: {
    Vodal
  },
  data() {
    return {
      show: true
    };
  }
};
</script>

We use the vodal component and the CSS.

The modal content is between the vodal tags.

The show prop makes the modal show if it’s true .

The hide event is emitted when we click the close button.

animation is set to rotate to see a rotate animation when we open and close the modal.

We can customize the styles and the content as we wish.

Other animation types include zoom, fade, flip, slide up, slide down, and more.

Vue Advanced Cropper

Vue Advanced Cropper is a handy image cropper that’s easy for developers and users to use.

We can install it by running:

npm i vue-advanced-cropper

Then we can use it as follows:

<template>
  <div>
    <cropper
      class="cropper"
      :src="img"
      :stencilProps="{
      aspectRatio: 10/12
    }"
      @change="change"
    ></cropper>
  </div>
</template>

<script>
import { Cropper } from "vue-advanced-cropper";

export default {
  data() {
    return {
      img: "http://placekitten.com/200/200"
    };
  },
  methods: {
    change({ coordinates, canvas }) {
      console.log(coordinates, canvas);
    }
  },
  components: {
    Cropper
  }
};
</script>

Now we get an image cropped with the image we set for the img URL.

src is set to the image.

stencilProps sets various options like the aspect ratio.

Other things like minimum and maximum aspect ration, class name, lines, and more can be set in the stencilProps object.

Conclusion

vue-html-to-paper lets us make printable elements and display a print dialog box.

vue-monthly-picker is a month picker component.

Vodal is a simple modal component that’s customizable.

Vue Advanced Cropper is an image cropper component.