Categories
Top Vue Packages

Top Vue Packages for Dropdown, Date Pickers and Popups

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

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 *