Top Vue Packages for Adding a Time Selector, Context Menu, and Scrollbar

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 time selector, context menu, and more.

Vue-timeselector

vue-timeselector lets us add a time picker into our Vue app.

To install it, we can run:

npm i vue-timeselector

Then we can use it by writing:

App.vue

<template>
  <div>
    <timeselector v-model="time"></timeselector>
    <p>{{time}}</p>
  </div>
</template>

<script>
import Timeselector from "vue-timeselector";

export default {
  components: {
    Timeselector
  },
  data() {
    return {
      time: undefined
    };
  }
};
</script>

Now we get an input element where we can set the time. It emits the input event which is emitted with the inputted value. name sets the name attribute of the input. We can also set the input to required or disable the input. Also, we can set a placeholder like any other input. Optionally, we can add a second picker to let us pick the seconds. The interval can be changed with the interval prop.

We can add the second’s picker and change the interval of the pickers by writing:

<template>
  <div>
    <timeselector v-model="time" :interval="{h:2, m:1, s:10}" displaySeconds></timeselector>
    <p>{{time}}</p>
  </div>
</template>

<script>
import Timeselector from "vue-timeselector";

export default {
  components: {
    Timeselector
  },
  data() {
    return {
      time: undefined
    };
  }
};
</script>

vue-simple-context-menu

The vue-simple-context-menu lets us add a context menu to our app.

To install it, we can run:

npm i vue-simple-context-menu

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import "vue-simple-context-menu/dist/vue-simple-context-menu.css";

import VueSimpleContextMenu from "vue-simple-context-menu";
Vue.component("vue-simple-context-menu", VueSimpleContextMenu);

Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <div class="item-wrapper">
      <div
        v-for="item in items"
        :key="item"
        [@click](http://twitter.com/click "Twitter profile for @click").prevent.stop="handleClick($event, item)"
      >{{item}}</div>
    </div>

<vue-simple-context-menu
      :elementId="'myUniqueId'"
      :options="options"
      :ref="'vueSimpleContextMenu'"
      [@option](http://twitter.com/option "Twitter profile for @option")-clicked="optionClicked"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["foo", "bar"],
      options: [
        {
          name: "foo"
        },
        {
          name: "bar"
        }
      ]
    };
  },
  methods: {
    handleClick(event, item) {
      this.$refs.vueSimpleContextMenu.showMenu(event, item);
    },

    optionClicked(event) {
      window.alert(JSON.stringify(event));
    }
  }
};
</script>

We register the plugin and import the CSS for the menu from the package in main.js . Then we add the vue-simple-context-menu to add the menu to our component. It can be styled with the vue-simple-context-menu class.

vue2-perfect-scrollbar

The vue2-perfect-scrollbar package lets us add a scrollbar to our app into any element.

We can install it by running:

npm i vue2-perfect-scrollbar

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import PerfectScrollbar from "vue2-perfect-scrollbar";
import "vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css";

Vue.use(PerfectScrollbar);

Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <perfect-scrollbar>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, odio vitae cursus placerat, felis nibh consectetur arcu, vel consectetur enim enim in purus. Cras non viverra arcu, ac semper mi. Sed vehicula porttitor malesuada. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id libero eleifend, bibendum odio a, efficitur neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum hendrerit tellus posuere massa rutrum, eu congue nisi ornare.</p>

      <p>Vestibulum sed dapibus eros. Quisque semper quam non laoreet rutrum. Vestibulum efficitur dictum sem eget ornare. Nullam egestas arcu erat, quis elementum felis venenatis ac. In commodo, lacus at vestibulum viverra, ante ante tristique metus, id tempus augue erat sed ipsum. Nullam ut nibh non augue mattis porta. Curabitur consectetur tellus eu tellus eleifend, ut ornare urna suscipit. Ut pharetra nulla fringilla, ultrices arcu ac, ullamcorper leo. In ultricies erat ac semper laoreet. Ut tristique condimentum dui eget tempus. Sed sed placerat nulla. Ut at blandit neque, vitae sodales urna. Vestibulum id ultrices ante, eget blandit ex.</p>
    </perfect-scrollbar>
  </div>
</template>

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

<style>
.ps {
  height: 400px;
}
</style>

Because we have the perfect-scrollbar component, we’ll see a scrollbar generated by it displayed instead of the browser’s native scrollbar.

We can style the element rendered by perfect-scrollbar with the .ps class.

Conclusion

vue-timeselector lets us add a time picker to our Vue app. vue-simple-context-menu lets us add a context menu to our app. vue2-perfect-scrollbar replaces the native scrollbar with its own. Thanks for reading my article, I hope you found it helpful!