Top Vue Packages for Adding Currency Input, Menu, Icons, and Resizable Elements
Tags: vue, javascript
Published: 2020-07-26 23:58:53

---
title: Top Vue Packages for Adding Currency Input, Menu, Icons, and Resizable Elements
published: true
date: 2020-07-26 23:39:41 UTC
tags: vue,javascript
canonical_url: https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-currency-input-menu-icons-and-resizable-elements/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-currency-input-menu-icons-and-resizable-elements
---
**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 adding a Stripe like menu, numeric currency input, icons, and resizable elements.

### vue-stripe-menu

vue-stripe-menu lets us add a Stripe like menu to our app.

To install it, we run:

```
npm i vue-stripe-menu

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import VueStripeMenu from "vue-stripe-menu";
import "vue-stripe-menu/dist/vue-stripe-menu.css";
Vue.use(VueStripeMenu);

Vue.config.productionTip = false;

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

```

`App.vue`

```
<template>
  <vsm-menu
    :menu="menu"
    :base-width="380"
    :base-height="400"
    :screen-offset="10"
    element="header"
    @open-dropdown="onOpenDropdown"
    @close-dropdown="onCloseDropdown"
  >
    <template #default="{ item }">
      <div class="wrap-content">
        <div class="wrap-content__block">Header: {{ item.title }}</div>
        <div class="wrap-content__item">{{ item }}</div>
      </div>
    </template>
    <template #before-nav>
      <li class="vsm-section logo-section">
        <img src="http://placekitten.com/100/100" alt="logo">
      </li>
    </template>
    <template #title="data">{{ data.item.title }}</template>
    <template #after-nav>
      <li class="vsm-section vsm-mob-hide">
        <button>My Button</button>
      </li>
      <vsm-mob>Mobile Content</vsm-mob>
    </template>
  </vsm-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          title: "App",
          dropdown: "app",
          element: "span",
          attributes: {
            class: ["my-class1", { "my-class2": true }],
            "data-big": "yes"
          },
          listeners: {
            mouseover: evt => {
              console.log("news hover", evt);
            }
          },
          new_section: false
        },
        {
          title: "External Link",
          attributes: {
            href: "https://example.com",
            target: "_blank"
          }
        }
      ]
    };
  },
  methods: {
    onOpenDropdown() {
      console.log("onOpenDropdown");
    },
    onCloseDropdown() {
      console.log("onCloseDropdown");
    }
  }
};
</script>

```

We get an `App` link that displays something on hover.

The `External Link` link displays a link that we can click.

We also have a button.

`item` has the item.

We can also get the logo.

The menu is responsive so it displays different content when the screen is narrow.

We can style it the way we like.

There are slots to populate various items.

The `default` slot has the header items.

`title` has the title.

`after-nav` has the button.

### vue-numeric-currency

vue-numeric-currency lets us add a currency input to our Vue app.

To use it, we first install it by writing:

```
npm i vue-numeric-currency

```

Then we can write:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import VueNumeric from "vue-numeric-currency";

Vue.use(VueNumeric);

Vue.config.productionTip = false;

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

```

`App.vue`

```
<template>
  <div>
    <vue-numeric currency="$" separator="," v-model="price"></vue-numeric>
    <p>{{price}}</p>
  </div>
</template>

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

```

We add the `vue-numeric` component to our `App` component.

`currency` has the currency.

`separator` is the thousands separator.

`v-model` binds to the `price` state.

The binding is only done if we type a number.

We can restrict the range with the `min` and `max` props.

`precision` lets us change the number of decimal digits.

`placeholder` lets us change the placeholder.

We can also use the `autoselect` prop to auto-select the entered text when we focus on the input.

### vue-resizable

vue-resizable lets us creates a draggable and resizable component.

To install it, we can run:

```
npm i vue-resizable

```

Then we can make a draggable component by writing:

```
<template>
  <vue-resizable>
    <div class="resizable-content"></div>
  </vue-resizable>
</template>

<script>
import VueResizable from "vue-resizable";

export default {
  components: { VueResizable }
};
</script>

<style scoped>
.resizable-content {
  height: 100%;
  width: 100%;
  background-color: green;
}
</style>

```

We used the `vue-resizable` component to wrap anything that’s draggable and resizable inside.

The `height` and `width` has to be set as percentages or `vw` or `vh` to let the us change its size.

It emits various events. It emits events when the size changes, or when it’s dragged.

It also emits an event when it’s mounted.

### vue-unicons

vue-unicons is a useful set of icons we can use in our app.

To install it, we run:

```
npm i vue-unicons

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import Unicon from "vue-unicons";
import { uniLayerGroupMonochrome, uniCarWash } from "vue-unicons/src/icons";

Unicon.add([uniLayerGroupMonochrome, uniCarWash]);
Vue.use(Unicon);

Vue.config.productionTip = false;

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

```

`App.vue`

```
<template>
  <unicon name="car-wash" fill="green"></unicon>
</template>

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

```

We register the icon in `main.js` and used it in `App.vue` .

### Conclusion

vue-stripe-menu lets us add a Stripe-like menu to our app.

vue-numeric-currency lets us add a numeric currency input with various options.

To add a resizable element, we can use the vue-resizable package.

vue-unicons gives us a set of icons we can use in our Vue app.

The post [Top Vue Packages for Adding Currency Input, Menu, Icons, and Resizable Elements](https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-currency-input-menu-icons-and-resizable-elements/) appeared first on [The Web Dev](https://thewebdev.info).