Top Vue Packages for Changing Metadata, Drag and Drop, and Numeric Inputs
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:19:44

---
title: Top Vue Packages for Changing Metadata, Drag and Drop, and Numeric Inputs
published: true
date: 2020-07-26 23:43:59 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/26/top-vue-packages-for-changing-metadata-drag-and-drop-and-numeric-inputs/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-changing-metadata-drag-and-drop-and-numeric-inputs
---

**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](https://thewebdev.info/2020/07/26/top-vue-packages-for-changing-metadata-drag-and-drop-and-numeric-inputs/) appeared first on [The Web Dev](https://thewebdev.info).