vue-currency-select v0.2.1

vue-currency-select

vue-currency-select is a reusable dropdown component for selecting currency, built with Vue 2. This project heavily referencing transferwise/tw-currency-select, with several differences in styles and framework used.

Note: This package will be updated with Vue 3 after Vue 3 is on stable channel, with Vue 2 backward compatibility

Install

npm install vue-currency-select
# or
yarn add vue-currency-select

Setup

You can use this component as Vue plugin or component itself:

With plugin

import vCurrencySelect from 'vue-currency-select';

Vue.use(vCurrencySelect);

With component

// e.g., in MyComponent.vue,

<script>
import vCurrencySelect from 'vue-currency-select';

export default {
  components: {
    vCurrencySelect
  }
}
</script>

Either you load it as individual component or plugin, you can use this component as html tag:

<v-currency-select></v-currency-select>

Usage

By default, vue-currency-select provides a default currency set of 43 countries. There are some optional props that you can use to customize more of its behavior, like v-model, label and so on:

Example

With vue, default options and v-model two-way data binding (recommended)

<template>
  <v-currency-select
    label="Select currency:"
    v-model="selectedCurrency"
    @input-"selectChanged"
  ></v-currency-select>
</template>

<script>
export default {
  data() {
    return {
      selectedCurrency: ''
    };
  },
  methods: {
    // do something after selectedCurrency changed
    selectChanged() {
      console.log(this.selectedCurrency);
    }
  }
}
</script>

With partial vue, vanilla js and default options

<v-currency-select
  label="Select currency:"
  selected-option-id="selectedOptionId"
></v-currency-select>

<script>
  const selectedOption = document.querySelector('#selectedOptionId');
  console.log(selectedOption.innerText); // output selected option value
</script>

With partial vue, JQuery and default options

<v-currency-select
  label="Select currency:"
  selected-option-id="selectedOptionId"
></v-currency-select>

<script>
  console.log($('#selectedOptionId').text()); // output selected option value
</script>

With custom options (not recommended)

<script>
// first you have to create an options array that meet this component requirement
const customOptions = [
  {
    currency: 'EXP',
    country: 'EX'
  },
  // ... and so on
];
</script>

<v-currency-select
  label="Select currency:"
  options="customOptions"
>
</v-currency-select>

Unless you have a good reason to use custom options, it's way better to stick with default options, which is sufficient for most use case.

Local development setup

To develop vue-currency-select, run the following commands:

This project assume you installed Vue CLI.

Please note that vue-currency-select uses the following version of npm & node:

• npm >= 6.13.4
• node >= 12.16.1

npm install
# or
yarn install

Compiles and hot-reloads for development

npm run serve ./src/CurrencySelect.vue
# or
yarn serve ./src/CurrencySelect.vue

Compiles and minifies for production

npm run build
# or
yarn build

Lints and fixes files

npm run lint
# or
yarn lint

Packages

The main npm packages used in this project are the following:

• vue.js v2
• vue-select
• currency-flags

License

MIT © 2020 Andy Tan