Top Vue Packages for Adding a JSON Viewer, Image Cropper, Date Picker, and Notifications

John Au-Yeung
Jul 23 · 4 min read
Image for post
Image for post
Photo by Zdeněk Macháček on Unsplash

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 a JSON viewer, cropper, date picker, and notifications.

vue-json-tree-view

vue-json-tree-view is a nice JSON data viewer.

To use it, we run:

npm i vue-json-tree-view

to install it.

Then we can write:

<template>
<div>
<tree-view :data="jsonSource" :options="{ maxDepth: 3 }"></tree-view>
</div>
</template>

<script>
export default {
data() {
return {
jsonSource: {
foo: {
bar: 1
},
baz: [1, 2, 3]
}
};
}
};
</script>

to display the JSON on the screen.

We used the tree-view component to display the jsonSource object on the screen.

maxDepth is the maximum depth we display expanded.

The component emits a change-data emit which we can listen to.

Custom styles can also be applied.

VueCtkDateTimePicker

VueCtkDateTimePicker is an easy to use date and time picker for Vue apps.

To use it, we run:

npm i vue-ctk-date-time-picker

to install it.

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueCtkDateTimePicker from "vue-ctk-date-time-picker";
import "vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css";
Vue.component("VueCtkDateTimePicker", VueCtkDateTimePicker);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");

App.vue

<template>
<div>
<VueCtkDateTimePicker v-model="value"/>
<p>{{value}}</p>
</div>
</template>

<script>
export default {
data() {
return {
value: undefined
};
}
};
</script>

to use it.

We import the VueCtkDateTimePicker component and used it in our code.

Also, we imported the component’s CSS.

v-model binds the selected date and time to the value state.

It also has a dark mode.

The format of the picker can also change.

Other things can also be changed like the first day of the week, input size, shortcut keys, disabling dates and hours, and much more.

vue-croppa

vue-croppa lets us add an image cropper to our Vue app.

We can install it by running:

npm i vue-croppa

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Croppa from "vue-croppa";
import "vue-croppa/dist/vue-croppa.css";
Vue.use(Croppa);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");

App.vue

<template>
<div>
<croppa v-model="myCroppa"></croppa>
</div>
</template>

<script>
export default {
data() {
return {
myCroppa: {}
};
}
};
</script>

We import the CSS and component so we can use it in our code.

Now we’ll get an image upload placeholder where we can choose the image to manipulate.

There are many other things we can do.

For instance, we can change zoom settings, placeholders, initial images, and more.

It also emits events when a file is chosen, or when there are issues with the file like the file size being too large.

The cropper can also be used programmatically.

vue-snotify

vue-snotify is a notification library for Vue apps.

To use it, we can run:

npm i vue-snotify

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Snotify from "vue-snotify";
Vue.use(Snotify);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");

App.vue

<template>
<div>
<vue-snotify></vue-snotify>
</div>
</template>

<script>
export default {
mounted() {
this.$snotify.success("success");
}
};
</script>

We have the vue-snotify component to display the notification.

Then we display it with this.$nitify.success .

There are also options we can change.

For instance, we can change the timeout, show a progress bar, and more.

So we can write:

<template>
<div>
<vue-snotify></vue-snotify>
</div>
</template>

<script>
export default {
mounted() {
this.$snotify.success("success", {
timeout: 2000,
showProgressBar: false,
closeOnClick: false,
pauseOnHover: true
});
}
};
</script>

We can also write HTML:

<template>
<div>
<vue-snotify></vue-snotify>
</div>
</template>

<script>
export default {
mounted() {
this.$snotify.html(`<div><b>bold</b></div>`, {
timeout: 5000,
showProgressBar: true,
closeOnClick: false,
pauseOnHover: true
});
}
};
</script>
Photo by Thomas Bonometti on Unsplash

Conclusion

vue-json-tree-view is a useful JSON viewer for Vue apps.

VueCtkDateTimePicker lets us add a date time picker.

vue-croppa lets us add an image cropper.

vue-snotify lets us add notifications to our Vue app.

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store