Vue-country-code-select NPM

vue-country-code-select

Country Code Select with Vue.

Checkout Demo at Github pages.

Installation

yarn:
```
  yarn add vue-country-code-select
```
npm:
```
  npm i --save vue-country-code-select
```

Usage

Install as a global component:

import Vue from "vue";
import VueCountryCode from "vue-country-code-select";

Vue.use(VueCountryCode);

In your component:

<template>
...
   <vue-country-code
                  @onSelect="onSelect"
                  <!-- optional -->
                  :preferredCountries="['vn', 'us', 'gb']">
   </vue-country-code>
...
<template>
<script>
export default {
  data() {
    return {
    };
  },
  methods: {
     onSelect({name, iso2, dialCode}) {
       console.log(name, iso2, dialCode);
     },
  },
}
</script>

Props

Property value	Type	Default value	Description
`defaultCountry`	`string`	`''`	Default country, will override the country fetched from IP address of user
`searchPlaceholderText`	`string`	`''`	Default text - "Search country"
`enableSearchField`	`Boolean`	`''`	Default "false"
`disabledFetchingCountry`	`Boolean`	false	Disable fetching current country based on IP address of user
`enabledCountryCode`	`Boolean`	`false`	Enable country code in the input
`enabledFlags`	`Boolean`	`true`	Enable flags in the input
`preferredCountries`	`Array`	`[]`	Preferred countries list, will be on top of the dropdown. ie `['AU', 'BR']`
`onlyCountries`	`Array`	`[]`	List of countries will be shown on the dropdown. ie `['AU', 'BR']`
`ignoredCountries`	`Array`	`[]`	List of countries will NOT be shown on the dropdown. ie `['AU', 'BR']`
`dropdownOptions`	`Object`	`{ disabledDialCode: false }`	Options for dropdown, supporting `disabledDialCode`

Events

Property value	Arguments	Description
`onSelect`	`Object`	Fires when the input changes with the argument is the object includes `{ name, iso2, dialCode }`

Highlights & Credits

Forked from hantrongbinh/vue-country-code.
Vue app created by vue-cli.
Telephone Number parsing, validation by libphonenumber-js.
Country Codes data from intl-tel-input.
Country Flags by behdad/region-flags.
User's Location by get-json and ipifo.io

Demo Usage

# install dependencies
$ yarn/npm install

# compile demo and start serve for development
$ yarn/npm dev

# build
$ yarn/npm build

Made by Mon.

vue telephone phone country vue-country-code phone code country code

@infinitebrahmanuniverse/nolb-vue-co @everything-registry/sub-chunk-3077

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago