Categories
Top Vue Packages

Top Vue Packages for Formatting Currencies, Adding Text Area, and More

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.