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>
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.
