Simple Vue Libraries for Adding Input Controls

Photo by Chris Leipelt on Unsplash

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 some simple Vue packages for adding rich input controls to our Vue apps.

vue-input-tag

The vue-input-tag package lets us add an input control to let users enter multiple tags.

We can install the Node package version by running:

npm install vue-input-tag --save

Also, we can include the library from a script tag by writing:

<script src="https://unpkg.com/vue-input-tag"></script>

Then we can use it as follows:

main.js

import Vue from "vue";
import App from "./App.vue";
import InputTag from "vue-input-tag";
Vue.component("input-tag", InputTag);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <input-tag v-model="tags"></input-tag>
    <p>{{tags}}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return { tags: [] };
  }
};
</script>