Category: Vue Answers

Sometimes, we want to format currencies in a Vue.js component.

In this article, we’ll look at how to format currencies in a Vue.js component.

How to format currencies in a Vue.js component?

To format currencies in a Vue.js component, we can create our own filter.

For instance, we write

Vue.filter("toCurrency", (value) => {
  if (typeof value !== "number") {
    return value;
  }
  const formatter = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  });
  return formatter.format(value);
});

to create the toCurrency filter with Vue.filter.

In it, we use the Intl.NumberFormat constructor to return a currency string converted from the number by calling formatter.format with value.

We set the the style to 'currency' to format the number into a currency string.

Then we can use it in our component by writing

<template>
  <div>
    <div class="text-right">
      {{ invoice.fees | toCurrency }}
    </div>
  </div>
</template>

Conclusion

To format currencies in a Vue.js component, we can create our own filter.

Sometimes, we want to change font size in Vuetify based on viewport.

In this article, we’ll look at how to change font size in Vuetify based on viewport.

How to change font size in Vuetify based on viewport?

To change font size in Vuetify based on viewport, we can apply Vuetify font size classes based on the breakpoint.

For instance, we write

<template>
  <div>
    <div class="{'subheading': $vuetify.breakpoint.xs}">...</div>
  </div>
</template>

to set the div’s class to subheading when the breakpoint is xs or higher by setting subheading to $vuetify.breakpoint.xs.

Conclusion

To change font size in Vuetify based on viewport, we can apply Vuetify font size classes based on the breakpoint.

Sometimes, we want to save user sessions with Vue.js.

In this article, we’ll look at how to save user sessions with Vue.js.

How to save user sessions with Vue.js?

To save user sessions with Vue.js, we can use the vue-session package.

To install it, we run

npm i vue-session

Then we register the plugin by writing

import VueSession from 'vue-session'

Vue.use(VueSession)

And then we can use it with

<script>
//...
export default {
  //...
  beforeCreate() {
    if (!this.$session.exists()) {
      this.$router.push("/");
    }
  },
  methods: {
    logout() {
      this.$session.destroy();
      this.$router.push("/");
    },
  },
  //...
};
</script>

to call this.$session.exists to check if the session is created.

And we call this.$session.destroy to destroy the session.

We can add an entry into the session with

this.$session.set('jwt', token)

where 'jwt' is the key and token is the value.

Conclusion

To save user sessions with Vue.js, we can use the vue-session package.

Sometimes, we want to add and remove item from an array in components in Vue.js.

In this article, we’ll look at how to add and remove item from an array in components in Vue.js.

How to add and remove item from an array in components in Vue.js?

To add and remove item from an array in components in Vue.js, we can use JavaScript array methods.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    addRow() {
      this.rows.push({ description: "", unitprice: "", code: "" });
    },
    removeRow(index) {
      this.rows.splice(index, 1);
    },
  },
  //...
};
</script>

to call this.rows.push to append an entry to the this.rows reactive array.

And we call this.rows.splice with the index of the item we want to remove and 1 to remove the item in this.rows with the given index.

Conclusion

To add and remove item from an array in components in Vue.js, we can use JavaScript array methods.

Sometimes, we want to disable the "development mode" warning in Vue.js.

In this article, we’ll look at how to disable the "development mode" warning in Vue.js.

How to disable the "development mode" warning in Vue.js?

To disable the "development mode" warning in Vue.js, we can set Vue.config.productionTip to false.

For instance, we write

Vue.config.productionTip = false

to set Vue.config.productionTip to false.

Conclusion

To disable the "development mode" warning in Vue.js, we can set Vue.config.productionTip to false.