John Au-YeungSubscribe 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 appeared first on The Web Dev.
