Hướng dẫn cài đặt và sử dụng thư viện vue-money trong dự án nuxt js

vue-money là một thư viện (library) dành cho Vue.js giúp bạn định dạng số tiền dễ dàng trong các ứng dụng Vue.js. Thư viện này hỗ trợ định dạng số tiền theo các định dạng tiền tệ khác nhau (ví dụ: USD, EUR, VND...), và cho phép bạn hiển thị số tiền theo các kiểu mà người dùng quen thuộc, ví dụ: thêm dấu phân cách hàng nghìn, định dạng số thập phân, thêm biểu tượng tiền tệ, v.v.

Bước 1: Tạo Dự Án Nuxt.js Mới

Nếu bạn chưa có dự án Nuxt.js, bạn có thể tạo một dự án mới :

Chú ý: Có 2 cách để tạo dự án Nuxtjs đó là:

• npm
• yarn

Đối với yarn chạy lệnh sau :

yarn create nuxt-app <project-name>

Còn đối với npm thì  tạo dự án bằng cách sử dụng npx:

npx create-nuxt-app servbay-nuxt-app

Bước 2: Cài đặt vue-money

Trước tiên, bạn cần cài đặt thư viện vue-money thông qua npm hoặc yarn.

Sử dụng npm:

npm install vue-money

Sử dụng yarn:

yarn add vue-money

Bước 3: Cấu hình thư viện trong Nuxt.js

Sau khi cài đặt xong, bạn sẽ cần tích hợp thư viện vue-money vào trong dự án Nuxt.js của mình. Có hai cách để làm điều này: sử dụng plugin hoặc đăng ký trực tiếp trong các component.

Cách 1: Sử dụng Plugin trong Nuxt.js

1. Tạo một Plugin: Tạo một file plugin để tích hợp vue-money. Ví dụ, tạo một file vue-money.js trong thư mục plugins/ của dự án Nuxt.js.

   plugins/vue-money.js:

    

   import Vue from 'vue';
   import VueMoney from 'vue-money';
   
   // Cài đặt plugin vue-money
   Vue.use(VueMoney);
   

2. Khai báo Plugin trong Nuxt.js: Sau khi đã tạo plugin, bạn cần khai báo plugin này trong file nuxt.config.js của dự án.

   nuxt.config.js:

   export default {
     plugins: [
       '~/plugins/vue-money.js',  // Đường dẫn đến plugin bạn vừa tạo
     ],
   };
   

Cách 2: Sử dụng trực tiếp trong các component

Nếu bạn chỉ muốn sử dụng vue-money trong một component cụ thể mà không cần phải tạo plugin, bạn có thể trực tiếp import và sử dụng trong component đó.

Ví dụ trong một component Vue:

<template>
  <div>
    <p>Formatted Price: <span>{{ price | money }}</span></p>
  </div>
</template>

<script>
import VueMoney from 'vue-money';

export default {
  data() {
    return {
      price: 1234567.89,
    };
  },
  filters: {
    money: VueMoney,
  },
};
</script>

Bước 4: Sử dụng vue-money trong các component

Sau khi đã cài đặt và cấu hình xong, bạn có thể sử dụng vue-money để định dạng số tiền trong bất kỳ component nào.

Ví dụ:

• Để hiển thị một số tiền đã được định dạng, bạn có thể sử dụng filter money.

<template>
  <div>
    <p>Giá trị sau khi định dạng: {{ 1000000 | money }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 1000000
    };
  }
};
</script>

• Nếu bạn muốn định dạng số tiền với các tùy chỉnh khác như đơn vị tiền tệ (VND, USD...), bạn có thể sử dụng các tham số trong vue-money.

Ví dụ, để định dạng số tiền với ký hiệu tiền tệ:

<template>
  <div>
    <p>{{ amount | money({ symbol: 'VND', precision: 0 }) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 1234567.89
    };
  }
};
</script>

Bước 5: Chạy ứng dụng

Sau khi đã cài đặt và sử dụng xong, bạn chỉ cần chạy lại ứng dụng của mình để kiểm tra kết quả.

npm run dev

Hoặc nếu bạn dùng yarn thì chạy lệnh

Yarn dev

Tóm tắt

1. Cài đặt thư viện vue-money.
2. Tạo plugin trong Nuxt.js hoặc sử dụng trực tiếp trong các component.
3. Sử dụng filter money trong template hoặc trực tiếp trong script để định dạng số tiền.

Chúc bạn thành công trong việc tích hợp thư viện vue-money vào dự án Nuxt.js của mình!