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 appeared first on The Web Dev.
Top comments (0)