Country Code Select with Vue
npm install vue-country-codeCountry Code Select with Vue.
Checkout Demo at Github pages.
- yarn:
``bash`
yarn add vue-country-code
- npm:
bash`
npm i --save vue-country-code
- Install as a global component:
`javascript
import Vue from "vue";
import VueCountryCode from "vue-country-code";
Vue.use(VueCountryCode);
`
- In your component:
`js`
...
:preferredCountries="['vn', 'us', 'gb']">
...
- Manual Trigger:
`js`
...
@onSelect="onSelect"
...
| Property value | Type | Default value | Description |
| ------------------------- | --------- | ----------------------------- | --------------------------------------------------------------------------- |
| defaultCountry | string | '' | Default country, will override the country fetched from IP address of user |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 |
| Property value | Arguments | Description |
| -------------- | --------- | ------------------------------------------------------------------------------------------------ |
| onSelect | Object | Fires when the input changes with the argument is the object includes { name, iso2, dialCode } |
- Forked from EducationLink/vue-tel-input.
- 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
`bash
``
Made by Mon.