### Install base-vue-phone-input using npm

Source: https://github.com/sidverson/base-vue-phone-input/blob/main/README.md

This snippet demonstrates how to install the `base-vue-phone-input` package using the npm package manager. This is a prerequisite for integrating the component into any project.

```bash
npm install base-vue-phone-input
```

--------------------------------

### Integrate Base Vue Phone Input Component in Vue 3

Source: https://github.com/sidverson/base-vue-phone-input/blob/main/README.md

This example shows how to import and use the `PhoneInput` component within a Vue 3 Single File Component (SFC) using the `<script setup>` syntax. It illustrates two-way data binding for the phone number (`v-model`) and how to capture the full phone number object via the `@update` event. The `tel` ref stores the formatted phone number string, and `res` stores the comprehensive phone object.

```vue
<script setup lang="ts">\nimport { ref } from 'vue'\nimport PhoneInput from './index'\n\nconst tel = ref('')\nconst res = ref()\n</script>\n\n<template>\n    <PhoneInput\n        v-model="tel"// for phone number\n        @update="res = $event"// for phone number object />\n    {{ res }}\n    {{ tel }}\n</template>
```

--------------------------------

### Translate Labels and Placeholders in Vue Phone Input

Source: https://github.com/sidverson/base-vue-phone-input/blob/main/README.md

Demonstrates how to provide custom translations for the phone input's placeholder and example text using the `translations` prop.

```javascript
<PhoneInput
  :translations="{
    phoneInput: {
      placeholder: 'Phone number',
      example: 'Example:',
    },
  }"
/>
```

--------------------------------

### Keyboard Accessibility Props for Vue Phone Input

Source: https://github.com/sidverson/base-vue-phone-input/blob/main/README.md

Describes the keyboard shortcuts and their corresponding actions for navigating the country list in the Vue Phone Input component.

```APIDOC
Prop: ArrowDown
  Action: Navigation down in countries list

Prop: ArrowUp
  Action: Navigation up in countries list

Prop: Escape
  Action: Close countries list
```

--------------------------------

### PhoneInput Component Props API Reference

Source: https://github.com/sidverson/base-vue-phone-input/blob/main/README.md

This section provides a comprehensive reference for all customizable properties (props) available for the `PhoneInput` component. These props allow developers to control various aspects of the input, including data binding, placeholder text, country list filtering, localization, and formatting behavior.

```APIDOC
PhoneInput Component Props:\n  modelValue:\n    Description: @model Country calling code + telephone number in international format\n    Type: string\n    Default: undefined\n  countryCode:\n    Description: @model Country code selected - Ex: "FR"\n    Type: CountryCode\n    Default: undefined\n  placeholder:\n    Description: Placeholder of the input\n    Type: string\n    Default: undefined\n  label:\n    Description: label of the input\n    Type: string\n    Default: undefined\n  preferredCountries:\n    Description: List of country codes to place first in the select list - Ex: ['FR', 'BE', 'GE']\n    Type: Array\n    Default: undefined\n  ignoredCountries:\n    Description: List of country codes to be removed from the select list - Ex: ['FR', 'BE', 'GE']\n    Type: Array\n    Default: undefined\n  onlyCountries:\n    Description: List of country codes to only have the countries selected in the select list - Ex: ['FR', 'BE', 'GE']\n    Type: Array\n    Default: undefined\n  translations:\n    Description: Locale strings of the component\n    Type: Partial\n    Default: undefined\n  noUseBrowserLocale:\n    Description: By default the component use the browser locale to set the default country code if not country code is provided\n    Type: boolean\n    Default: undefined\n  fetchCountry:\n    Description: The component will make a request (https://ipwho.is) to get the location of the user and use it to set the default country code\n    Type: boolean\n    Default: undefined\n  customCountriesList:\n    Description: Replace country names\n    Type: Record\n    Default: undefined\n  autoFormat:\n    Description: Disabled auto-format when phone is valid\n    Type: boolean\n    Default: true\n  noFormattingAsYouType:\n    Description: Disabled auto-format as you type\n    Type: boolean\n    Default: false\n  countryLocale:\n    Description: locale of country list - Ex: "fr-FR"\n    Type: string\n    Default: undefined\n  excludeSelectors:\n    Description: Exclude selectors to close country selector list - usefull when you using custom flag\n    Type: Array\n    Default: undefined
```

--------------------------------

### Events API for Vue Phone Input

Source: https://github.com/sidverson/base-vue-phone-input/blob/main/README.md

Documents the events emitted by the Vue Phone Input component, including their names and return values.

```APIDOC
Event: input
  Return: [AsYouType value](https://github.com/catamphetamine/libphonenumber-js#as-you-type-formatter)
  Description: Emitted when a new value is entered in the phone number input or when a country is chosen.

Event: update
  Return: All values (Result type)
  Description: Emitted with all relevant phone number data as a Result type object.
```

--------------------------------

### Translate Country List by Locale in Vue Phone Input

Source: https://github.com/sidverson/base-vue-phone-input/blob/main/README.md

Shows how to translate the country list by setting a specific locale using the `country-locale` prop.

```javascript
<PhoneInput country-locale='fr-FR' />
```

--------------------------------

### Provide Custom Country List Translations in Vue Phone Input

Source: https://github.com/sidverson/base-vue-phone-input/blob/main/README.md

Illustrates how to provide a custom, explicit list of country translations using the `custom-countries-list` prop.

```javascript
<PhoneInput
  :custom-countries-list="{
    FR: 'France',
    BE: 'Belgique',
    DE: 'Allemagne',
    US: 'Etats-Unis',
  }"
/>
```

--------------------------------

### Named Slots for Vue Phone Input Component

Source: https://github.com/sidverson/base-vue-phone-input/blob/main/README.md

Details the named slots available for customizing the country selector and input components, including their bindings.

```APIDOC
Slot: selector
  Description: Change the country selector component.
  Bindings:
    - input-value: String - current selected country code (Ex: "FR")
    - updateInputValue: Function - action for changing country code by passing country code
    - countries: Array - array of all countries

Slot: input
  Description: Change the input component.
  Bindings:
    - input-value: String - phone number value
    - updateInputValue: Function - action for updating phone value
    - placeholder: String - placeholder text
```

--------------------------------

### Country Type Definition for Vue Phone Input

Source: https://github.com/sidverson/base-vue-phone-input/blob/main/README.md

Defines the `Country` interface, representing a country object with its ISO2 code, dial code, and name, used within the Vue Phone Input component.

```javascript
export interface Country {
    iso2: CountryCode
    dialCode: CountryCallingCode
    name: string
}
```

--------------------------------

### Results Type Definition for Vue Phone Input

Source: https://github.com/sidverson/base-vue-phone-input/blob/main/README.md

Defines the `Results` type, which represents the structured data emitted by the `@update` or `@data` events of the Vue Phone Input component, including validation status, country codes, and formatted numbers.

```javascript
export type Results = {
  isValid: boolean
  isPossible?: boolean
  countryCode?: CountryCode
  countryCallingCode?: CountryCallingCode
  nationalNumber?: NationalNumber
  type?: NumberType
  formatInternational?: string
  formatNational?: string
  uri?: string
  e164?: string
  rfc3966?: string
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.