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 the best packages for formatting currencies, adding a text area, letting users copy data to the clipboard, and adding a photo masonry grid.
vue-currency-filter
vue-currency-filter is a package that provides us with filters for formatting currencies.
To use it, first we install it by running:
npm install vue-currency-filter
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueCurrencyFilter from "vue-currency-filter";
Vue.use(VueCurrencyFilter, {
symbol: "$",
thousandsSeparator: ".",
fractionCount: 2,
fractionSeparator: ",",
symbolPosition: "front",
symbolSpacing: true
});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">{{ 3000 | currency}}</div>
</template>
<script>
export default {};
</script>
symbol is the currency symbol,
thousandsSeparator is the thousands separator,
fractionCount is the number of decimal places.
fractionSeparator is the separator for decimal digits.
symbolPosition is where we put the currency symbol.
symbolSpacing is the spacing of the currency symbol.
In the template, we use the currency filter to format the number.
vue-textarea-autosize
vue-textarea-autosize is a text area component that changes height automatically.
To install it, we run:
npm i vue-textarea-autosize
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import TextareaAutosize from "vue-textarea-autosize";
Vue.use(TextareaAutosize);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<textarea-autosize
placeholder="text"
ref="textarea"
v-model="value"
:min-height="30"
:max-height="350"
/>
</div>
</template>
<script>
export default {
data() {
return {
value: ""
};
}
};
</script>
to use it.
We have the placeholder prop to set the placeholder.
ref is the ref we can use to call DOM methods.
min-height and max-height adjust the height of the text area.
We can write:
<template>
<div id="app">
<textarea-autosize
placeholder="text"
ref="textarea"
v-model="value"
:min-height="30"
:max-height="350"
/>
</div>
</template>
<script>
export default {
data() {
return {
value: ""
};
},
mounted() {
this.$refs.textarea.$el.focus();
}
};
</script>
to focus the text area.
To add auto-sizing, we can use the autosize prop:
<template>
<div id="app">
<textarea-autosize
autosize
placeholder="text"
ref="textarea"
v-model="value"
:min-height="30"
:max-height="350"
/>
</div>
</template>
<script>
export default {
data() {
return {
value: ""
};
}
};
</script>
vue-clipboard
vue-clipboard lets us copy or cut text to the clipboard with the bundled directive.
To install it, we run:
npm i vue-clipboards
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueClipboards from "vue-clipboards";
Vue.use(VueClipboards);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<button v-clipboard="copyData">Copy</button>
</div>
</template>
<script>
export default {
data() {
return {
copyData: "hello"
};
}
};
</script>
We register the VueClipboards plugin.
Then we use the v-clipboards directive to let us copy the data when the button is pressed.
vue-masonry
vue-masonry is a Vue plugin that lets us add a masonry effect to our Vue app easily.
We can display pictures in a grid like Google or Flickr.
To use it, we install it by writing:
npm i vue-masonry
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import { VueMasonryPlugin } from "vue-masonry";
Vue.use(VueMasonryPlugin);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<div v-masonry="containerId" transition-duration="0.3s" item-selector=".item">
<div v-masonry-tile class="item" v-for="n in 30" :key="n">
<img src="http://placekitten.com/200/200">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
containerId: "id"
};
}
};
</script>
We register the plugin.
Then we use the v-masonry and v-masonry-tile directive to apply the masonry effect to the photos.
transition-duration is the length of the transition when resizing the grid.
Conclusion
vue-currency-filter is a plugin that lets us format currencies.
vue-textarea-autosize is a text area that can resize according to the text.
vue-clipboard lets us copy data to the clipboard
vue-masonry is a photo masonry grid.
