Categories
Top Vue Packages

Top Vue Packages for Display Alerts, Month Picker, Formatting Dates, and Displaying JSON

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 alerts, month picker, formatting dates, and displaying JSON.

vue-sweetalert2

vue-sweetalert2 is an easy to use package that lets us add popup alerts to our app.

To use it, first we install it by running:

npm i vue-sweetalert2

Then we can use it after we import the styles and register the plugin:

import Vue from "vue";
import App from "./App.vue";
import VueSweetalert2 from "vue-sweetalert2";

import "sweetalert2/dist/sweetalert2.min.css";

Vue.use(VueSweetalert2);
Vue.config.productionTip = false;

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

Then we can use it in our component:

<template>
  <button @click="showAlert">click me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal("Hello world!");
    }
  }
};
</script>

vue-luxon

vue-luxon is a package that lets us parse dates and times and format them.

To use it, we install it by running:

npm i vue-luxon

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueLuxon from "vue-luxon";
Vue.use(VueLuxon);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>{{ '2020-01-01' | luxon }}</div>
</template>

<script>
export default {};
</script>

We registered the plugin from the vue-luxon package.

Then we can use the luxon filter to format a date string into a date.

We can change the format:

<template>
  <div>{{ '2020-01-01' | luxon:format('dd-MM-yy') }}</div>
</template>

<script>
export default {};
</script>

The locale can also be changed:

<template>
  <div>{{ '2020-01-01' | luxon:locale('long') }}</div>
</template>

<script>
export default {};
</script>

We can also display the difference between the given date and today:

<template>
  <div>{{ '2020-01-01' | luxon:diffForHumans }}</div>
</template>

<script>
export default {};
</script>

Other options include the time zone, server format, locale language, format, and more.

vue-autosuggest

vue-autosuggest is a useful autocomplete component that we can add to a Vue app.

To install it, we run:

npm i vue-autosuggest

Then we can use it by writing:

<template>
  <div>
    <vue-autosuggest
      :suggestions="[{data:['foo', 'bar', 'baz']}]"
      :input-props="{id:'suggest', placeholder:'pick a choice'}"
      @input="onInputChange"
      @selected="selectHandler"
      @click="clickHandler"
    >
      <template slot-scope="{suggestion}">
        <span class="my-suggestion-item">{{suggestion.item}}</span>
      </template>
    </vue-autosuggest>
  </div>
</template>

<script>
import { VueAutosuggest } from "vue-autosuggest";
export default {
  components: {
    VueAutosuggest
  },
  methods: {
    onInputChange() {},
    selectHandler() {},
    clickHandler() {}
  }
};
</script>

We can set the placeholder property to set the placeholder.

data has the data for the autosuggest.

Now we have an unsettled autocomplete dropdown that we can select a choice from. We can customize the dropdown with other slots.

before-input , after-input , before-suggestions , before-section , after-section , and after-suggestions lets us change how the input and suggestions are laid out.

vue-json-tree

vue-json-tree is a useful component for letting us display JSON data in our Vue app.

To use it, we run:

npm i vue-json-tree

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import JsonTree from "vue-json-tree";
Vue.component("json-tree", JsonTree);
Vue.config.productionTip = false;

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

App.vue :

<template>
  <div>
    <json-tree :raw="sample"></json-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sample: '{"foo": "bar"}'
    };
  },
  methods: {}
};
</script>

We just register the plugin and then use the json-tree component to display the JSON.

We can keep some levels collapsed with the level prop.

vue-monthly-picker

The vue-monthly-picker lets us add a month picker to our app.

To install it, we run:

npm i vue-monthly-picker moment

Moment is a dependency of vue-monthly-picker.

Then we can use it by writing:

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

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

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

Then we see a month picker in our app.

Conclusion

We can display alerts with vue-sweetalert2. vue-luxon lets us format date strings the way we like. The vue-json-tree package is useful for letting us render JSON. vue-monthly-picker is an easy to use month picker. Thanks for reading my article, I hope you found it helpful!

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.