Categories
Top Vue Packages

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

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

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *