Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

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 changing metadata of our app, adding drag and drop and adding numeric inputs.

vue-head

The vue-head package lets us change the meta tag of our app for better SEO.

First, we install it by running:

npm i vue-head

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueHead from "vue-head";

Vue.use(VueHead);
Vue.config.productionTip = false;

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

to register the plugin.

Then in our component, we can write:

<template>
  <div></div>
</template>

<script>
export default {
  data(){
    return {
      title: 'title'
    }
  },
  head: {
    title() {
      return {
        inner: this.title
      };
    },
    meta: [{ name: "description", content: "My description", id: "desc" }]
  }
};
</script>

to set the title and meta tag values as we see fit.

We can also pass some options to Vue.use :

import Vue from "vue";
import App from "./App.vue";
import VueHead from "vue-head";

Vue.use(VueHead, {
  separator: "-",
  complement: "complement"
});
Vue.config.productionTip = false;

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

Then we add the separator and the complement text after the separator.

vue-nestable

We can use the vue-nestable to create a tree view that can have items that can be dragged and dropped.

To install it, we run:

npm i vue-nestable

Then we use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueNestable from "vue-nestable";

Vue.use(VueNestable);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <vue-nestable v-model="nestableItems">
      <vue-nestable-handle slot-scope="{ item }" :item="item">{{ item.text }}</vue-nestable-handle>
    </vue-nestable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nestableItems: [
        { id: 0, text: "foo" },
        { id: 1, text: "bar" },
        { id: 2, text: "baz" }
      ]
    };
  }
};
</script>

We register the plugin and used the vue-nestable component.

v-model has the items that we want to render. It’ll be set to the latest values as the items are dragged and dropped.

vue-nestable-handle has the list of items that are rendered.

They are draggable and they can be dropped at different levels.

The maximum depth and styling can be changed.

vue-slider-component

vue-slider-component lets us create a slider which we can use as a numeric input component.

We install it by running:

npm i vue-slider-component

Then we can use it by writing:

<template>
  <div>
    <vue-slider v-model="value"/>
    <p>{{value}}</p>
  </div>
</template>

<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/antd.css";

export default {
  components: {
    VueSlider
  },
  data() {
    return {
      value: 0
    };
  }
};
</script>

We imported and registered the vue-slider component.

And we also imported the bundled CSS file.

v-model binds to the value of the slider.

vue-screen-size

We can use the vue-screen-size package to get the screen size of the screen that the app is displayed in.

To install it, we run:

npm i vue-screen-size

Then we can use it by writing:

<template>
  <div>{{$vssWidth }}x{{$vssHeight}}</div>
</template>

<script>
import VueScreenSize from "vue-screen-size";

export default {
  mixins: [VueScreenSize.VueScreenSizeMixin]
};
</script>

We add the package’s bundled mixin.

Then we can use the $vssWidth variable to get the width and $vssHeight to get the height of the screen.

vue-numeric-input

vue-numeric-input provides us with an easy to add numeric input that has increment and decrement buttons to let us change the values.

To install it, we run:

npm i vue-numeric-input

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueNumericInput from "vue-numeric-input";

Vue.use(VueNumericInput);

Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <vue-numeric-input v-model="value" :min="1" :max="10" :step="2"></vue-numeric-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0
    };
  }
};
</script>

v-model binds the inputted value to the value state.

max is the max value that the input allows.

min is the min value that the input allows.

step is the number which the value increments or decrements by when we press the buttons.

Conclusion

We can add numeric inputs with vue-slider-component and vue-numeric-input.

vue-screen-size lets watch for screen size changes.

vue-head lets us set the metadata for our app.

vue-nestable lets us create a draggable list.

The post Top Vue Packages for Changing Metadata, Drag and Drop, and Numeric Inputs appeared first on The Web Dev.