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 how the best packages for adding a dropdown with hierarchical selections, popups, and an auto-suggest input.
vue-treeselect
vue-treeselect provides us with a dropdown that’s hierarchical that we can use in our Vue app.
To use it, first we install it by running:
npm i @riophae/vue-treeselect
Then we can use it by writing:
<template>
<div id="app">
<treeselect v-model="value" multiple :options="options"/>
</div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { Treeselect },
data() {
return {
value: null,
options: [
{
id: 1,
label: "a",
children: [
{
id: 2,
label: "foo"
},
{
id: 3,
label: "bar"
}
]
},
{
id: 4,
label: "baz"
},
{
id: 5,
label: "qux"
}
]
};
}
};
</script>
We have an options
array that have all the options.
They can be nested with the children
property.
This way, we’ll see them listed in the dropdown choices.
multiple
enables multiple selections.
We’ve to remember to set the id
to our choice.
vue-popperjs
vue-popperjs is a pop-up component for add tooltips to elements.
To use it, we first install it by running:
npm i vue-popperjs
Then we can use it by writing:
<template>
<popper
trigger="clickToOpen"
:options="{
placement: 'top',
modifiers: { offset: { offset: '0,10px' } }
}"
>
<div class="popper">Popper</div>
<button slot="reference">click me</button>
</popper>
</template>
<script>
import Popper from "vue-popperjs";
import "vue-popperjs/dist/vue-popper.css";
export default {
components: {
popper: Popper
}
};
</script>
We use the popper
component.
We set the trigger
to clickToOpen
to open the popup on click.
Vue FlatPickr Component
Vue FlatPickr Component is a date-time picker component.
To install it, we run:
npm i vue-flatpickr-component
Then we can use it by writing:
<template>
<div>
<flat-pickr v-model="date"></flat-pickr>
<p>{{date}}</p>
<p></p>
</div>
</template>
<script>
import flatPickr from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";
export default {
data() {
return {
date: null
};
},
components: {
flatPickr
}
};
</script>
We use the flat-pickr
component and bind the selected value to the date
state.
flat-pickr
will display a date-time picker.
We can also customize it with our own config.
For instance, we can write:
<template>
<div>
<flat-pickr v-model="date" :config="config"></flat-pickr>
<p>{{date}}</p>
<p></p>
</div>
</template>
<script>
import flatPickr from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";
import { French } from "flatpickr/dist/l10n/fr.js";
export default {
data() {
return {
date: null,
config: {
wrap: true,
altFormat: "M j, Y",
altInput: true,
dateFormat: "Y-m-d",
locale: French
}
};
},
components: {
flatPickr
}
};
</script>
We change the altFormat
to set the date format.
dateFormat
is the selected date format.
locale
sets the locale.
wrap
wraps the input.
vue-bootstrap-datetimepicker
Vue Bootstrap 4 DatetimePicker is a date-time picker that we can use.
To install it, we run:
npm i vue-bootstrap-datetimepicker
We then use the component by writing:
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<date-picker v-model="date" :config="options"></date-picker>
<p>{{date}}</p>
</div>
</div>
</div>
</template>
<script>
import "bootstrap/dist/css/bootstrap.css";
import datePicker from "vue-bootstrap-datetimepicker";
import "pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css";
export default {
data() {
return {
date: new Date(),
options: {
format: "DD/MM/YYYY",
useCurrent: false
}
};
},
components: {
datePicker
}
};
</script>
We use the date-picker
component to add our date picker input.
v-model
binds the selected date to the date
variable.
options
lets us add the options.
And we’ve to import the CSS to make it look right.
It uses Bootstrap’s style to style the date picker.
vue-autosuggest
vue-autosuggest is an input component that gives us suggestions of what to enter.
To use it, first we install it by running:
npm i vue-autosuggest
Then we use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueAutosuggest from "vue-autosuggest";
Vue.use(VueAutosuggest);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div class="container">
<vue-autosuggest
:suggestions="[{data:['apple', 'orange' ,'grape']}]"
:input-props="{id:'autosuggest', placeholder:`What's your favorite fruit?`}"
>
<template slot-scope="{suggestion}">
<span class="my-suggestion-item">{{suggestion.item}}</span>
</template>
</vue-autosuggest>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
We add the input with the vue-autosuggest
component.
Then we populate the default slot to display the choices our way.
Conclusion
vue-treeselect lets us add a dropdown with the with hierarchical selections.
vue-popperjs lets us add popups.
vue-bootstrap-datetimepicker is a simple date picker that uses Bootstrap styles.
vue-autosuggest is a autosuggestion input that we can use simply.