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!
