### Installation and Global Registration

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/docs/guide/installation.md

Instructions for installing the package and registering it as a global Vue plugin.

```APIDOC
## Installation

### Description
Install the vue-tel-input package via npm and register it globally in your Vue application.

### Command
`npm install vue-tel-input`

### Implementation
```javascript
import { createApp } from 'vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

const app = createApp(App);
app.use(VueTelInput, { mode: 'auto' });
```
```

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

### Installation and Basic Usage

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/docs/guide/getting-started.md

Instructions on how to install the vue-tel-input plugin using npm and how to add it to your Vue application. It also shows how to use the vue-tel-input component in your templates.

```APIDOC
## Installation

### Description
Install the vue-tel-input plugin using npm.

### Method
`npm install vue-tel-input`

### Endpoint
N/A

## Adding to Vue App

### Description
Add the plugin into your Vue application.

### Method
```javascript
import Vue from 'vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

const app = createApp(App);
app.use(VueTelInput);
app.mount('#app');
```

### Endpoint
N/A

## Using the Component

### Description
Use the `vue-tel-input` component in your Vue templates.

### Method
```html
<template>
  <vue-tel-input v-model="phone"></vue-tel-input>
</template>
```

### Endpoint
N/A
```

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

### Install vue-tel-input using npm

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/docs/guide/getting-started.md

Installs the vue-tel-input plugin using the npm package manager. This is the first step to using the component in your project.

```sh
npm install vue-tel-input
```

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

### Use vue-tel-input component

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/README.md

Shows how to implement the component in a template and optionally import it locally within a component setup.

```html
<template>
  <vue-tel-input v-model="phone" mode="international"></vue-tel-input>
</template>

<script>
  import { ref } from 'vue';
  import { VueTelInput } from 'vue-tel-input';
  import 'vue-tel-input/vue-tel-input.css';

  export default {
    components: {
      VueTelInput,
    },
    setup() {
      const phone = ref(null);
      return { phone };
    },
  };
</script>
```

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

### Configure Display Modes

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Examples of using the 'mode' prop to switch between auto, international, and national phone number formatting.

```vue
<template>
  <div>
    <vue-tel-input v-model="phone1" mode="auto" />
    <vue-tel-input v-model="phone2" mode="international" />
    <vue-tel-input v-model="phone3" mode="national" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const phone1 = ref('');
const phone2 = ref('');
const phone3 = ref('');
</script>
```

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

### Implement Validated Phone Input Form in Vue 3

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

A complete Vue 3 component example featuring vue-tel-input with real-time validation, custom error messages, and form submission logic. It utilizes the Composition API to manage state and handle component events.

```vue
<template>
  <form @submit.prevent="submitForm" class="phone-form">
    <div class="form-group">
      <label for="phone">Phone Number *</label>
      <vue-tel-input
        ref="phoneInput"
        v-model="form.phone"
        :input-options="{
          id: 'phone',
          required: true,
          placeholder: 'Enter your phone number',
          'aria-describedby': 'phone-error',
        }"
        :dropdown-options="{
          showSearchBox: true,
          showDialCodeInSelection: true,
        }"
        :preferred-countries="['US', 'CA', 'GB', 'AU']"
        :auto-format="true"
        mode="international"
        @validate="handleValidation"
        @country-changed="handleCountryChange"
        @blur="touchField('phone')"
      >
        <template #icon-right>
          <span v-if="phoneValidation.valid" class="icon-valid">✓</span>
          <span v-else-if="touched.phone && !phoneValidation.valid" class="icon-invalid">✗</span>
        </template>
      </vue-tel-input>
      <p v-if="touched.phone && !phoneValidation.valid" id="phone-error" class="error">
        {{ phoneValidation.message }}
      </p>
    </div>

    <div class="form-info" v-if="phoneValidation.country">
      <p>Country: {{ phoneValidation.country }}</p>
      <p>National Number: {{ phoneValidation.nationalNumber }}</p>
      <p>Formatted: {{ phoneValidation.formatted }}</p>
    </div>

    <button type="submit" :disabled="!phoneValidation.valid || isSubmitting">
      {{ isSubmitting ? 'Submitting...' : 'Submit' }}
    </button>
  </form>
</template>

<script setup>
import { ref, reactive } from 'vue';

const phoneInput = ref(null);
const isSubmitting = ref(false);

const form = reactive({
  phone: '',
});

const touched = reactive({
  phone: false,
});

const phoneValidation = reactive({
  valid: false,
  possible: false,
  country: '',
  nationalNumber: '',
  formatted: '',
  message: '',
});

const handleValidation = (phoneObject) => {
  phoneValidation.valid = phoneObject.valid;
  phoneValidation.possible = phoneObject.possible;
  phoneValidation.country = phoneObject.country;
  phoneValidation.nationalNumber = phoneObject.nationalNumber;
  phoneValidation.formatted = phoneObject.formatted;

  if (!phoneObject.valid) {
    if (!form.phone) {
      phoneValidation.message = 'Phone number is required';
    } else if (!phoneObject.possible) {
      phoneValidation.message = 'Invalid phone number format';
    } else {
      phoneValidation.message = 'Please enter a complete phone number';
    }
  } else {
    phoneValidation.message = '';
  }
};

const handleCountryChange = (country) => {
  console.log('Selected country:', country.name);
};

const touchField = (field) => {
  touched[field] = true;
};

const submitForm = async () => {
  touched.phone = true;

  if (!phoneValidation.valid) {
    phoneInput.value?.focus();
    return;
  }

  isSubmitting.value = true;

  try {
    const response = await fetch('/api/contact', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        phone: phoneValidation.formatted,
        country: phoneValidation.country,
      }),
    });

    if (response.ok) {
      alert('Phone number submitted successfully!');
      form.phone = '';
      touched.phone = false;
    }
  } catch (error) {
    console.error('Submission error:', error);
  } finally {
    isSubmitting.value = false;
  }
};
</script>
```

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

### Validate Phone Number with @validate Event in vue-tel-input

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Explains how to use the `@validate` event to get feedback on the phone number's validity. This event fires when the validity state changes or on component mount. The example shows how to display validation messages and apply dynamic CSS classes based on the validity and possibility of the entered number.

```Vue
<template>
  <div>
    <vue-tel-input
      v-model="phone"
      @validate="onValidate"
    />
    <p :class="validationClass">{{ validationMessage }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const phone = ref('');
const phoneData = ref(null);

const onValidate = (phoneObject) => {
  phoneData.value = phoneObject;

  // phoneObject contains:
  // - valid: boolean - Is the number valid
  // - possible: boolean - Is the number possibly valid
  // - country: string - ISO2 country code
  // - countryCode: string - Same as country
  // - nationalNumber: string - Number without country code
  // - formatted: string - Formatted number
};

const validationMessage = computed(() => {
  if (!phoneData.value) return '';
  if (phoneData.value.valid) return 'Valid phone number';
  if (phoneData.value.possible) return 'Possibly valid, keep typing...';
  return 'Invalid phone number';
});

const validationClass = computed(() => ({
  'text-green': phoneData.value?.valid,
  'text-yellow': phoneData.value?.possible && !phoneData.value?.valid,
  'text-red': phoneData.value && !phoneData.value.possible,
}));
</script>
```

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

### Import Component Locally for Tree-Shaking

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Demonstrates how to import the VueTelInput component directly into a specific component to optimize bundle size.

```vue
<template>
  <vue-tel-input
    v-model="phone"
    mode="international"
    :preferred-countries="['US', 'CA', 'GB']"
    :auto-format="true"
    :valid-characters-only="true"
    @on-input="handleInput"
  />
</template>

<script>
import { ref } from 'vue';
import { VueTelInput } from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

export default {
  components: {
    VueTelInput,
  },
  setup() {
    const phone = ref('');

    const handleInput = (number, phoneObject, input) => {
      console.log('Input value:', number);
      console.log('Phone object:', phoneObject);
      console.log('Input element:', input);
    };

    return { phone, handleInput };
  },
};
</script>
```

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

### Component Props Configuration

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Documentation for configuring the component behavior and styling using props.

```APIDOC
## Props: strictValidation

### Description
Enables strict phone number validation using full libphonenumber-js metadata for more accurate pattern matching.

### Parameters
- **strictValidation** (boolean) - Optional - Default: false. If true, uses full metadata and increases bundle size.

## Props: disabled

### Description
Disables the entire component, including the input field and the country dropdown.

### Parameters
- **disabled** (boolean) - Optional - Default: false.

## Props: styleClasses

### Description
Applies custom CSS classes to the component wrapper for styling customization.

### Parameters
- **styleClasses** (Array|Object|string) - Optional - List of classes to apply to the wrapper.
```

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

### Component Props and Configuration

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Details on how to configure the Vue Tel Input component using props like mode and defaultCountry.

```APIDOC
## Component Configuration

### Description
Configure the behavior of the phone input component using various props to control formatting and initial state.

### Parameters
#### Props
- **mode** (string) - Optional - Formatting mode: 'auto', 'international', or 'national'.
- **defaultCountry** (string|number) - Optional - Initial country ISO2 code or dial code.
- **autoDefaultCountry** (boolean) - Optional - Whether to enable IP-based country detection.
- **preferredCountries** (array) - Optional - List of ISO2 codes to show at the top of the dropdown.

### Usage Example
<vue-tel-input v-model="phone" mode="international" default-country="US" />
```

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

### Browser Usage via CDN for Vue Tel Input

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Demonstrates how to include vue-tel-input directly in an HTML file using unpkg CDN. This method is suitable for quick prototyping as it does not require a build step. It includes the necessary CSS and JavaScript files and sets up a basic Vue 3 application to use the component.

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/vue-tel-input/dist/vue-tel-input.css">
</head>
<body>
  <div id="app">
    <vue-tel-input v-model="phone" @validate="onValidate"></vue-tel-input>
    <p>Phone: {{ phone }}</p>
    <p>Valid: {{ isValid }}</p>
  </div>

  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/vue-tel-input"></script>
  <script>
    const { createApp, ref } = Vue;

    createApp({
      setup() {
        const phone = ref('');
        const isValid = ref(false);

        const onValidate = (phoneObject) => {
          isValid.value = phoneObject.valid;
        };

        return { phone, isValid, onValidate };
      }
    })
    .use(window['vue-tel-input'])
    .mount('#app');
  </script>
</body>
</html>
```

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

### Register vue-tel-input globally

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/README.md

Demonstrates how to import and register the plugin globally within a Vue 3 application, including optional global configuration.

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

const globalOptions = {
  mode: 'auto',
};

const app = createApp(App);
app.use(VueTelInput, globalOptions);
app.mount('#app');
```

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

### Implement Basic Phone Input with v-model

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Shows how to use the component with two-way data binding and handle validation events using the Composition API.

```vue
<template>
  <div>
    <vue-tel-input
      v-model="phone"
      @validate="onValidate"
      @country-changed="onCountryChanged"
    />
    <p v-if="isValid">Valid phone: {{ phone }}</p>
    <p v-else>Please enter a valid phone number</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
const isValid = ref(false);

const onValidate = (phoneObject) => {
  isValid.value = phoneObject.valid;
  console.log('Phone validation:', {
    valid: phoneObject.valid,
    possible: phoneObject.possible,
    country: phoneObject.country,
    nationalNumber: phoneObject.nationalNumber,
    formatted: phoneObject.formatted,
  });
};

const onCountryChanged = (country) => {
  console.log('Country changed:', country.name, country.dialCode);
};
</script>
```

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

### Set Default Country and Detection Settings

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Demonstrates how to set a default country using ISO2 codes or dial codes, and how to disable automatic IP-based detection.

```vue
<template>
  <div>
    <vue-tel-input v-model="phone1" default-country="AU" />
    <vue-tel-input v-model="phone2" :default-country="44" />
    <vue-tel-input v-model="phone3" default-country="US" :auto-default-country="false" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const phone1 = ref('');
const phone2 = ref('');
const phone3 = ref('');
</script>
```

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

### Exposed Methods: focus and blur

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Access the component's focus and blur methods programmatically through template refs.

```APIDOC
## Exposed Methods: focus and blur

### Description
Access the component's focus and blur methods programmatically through template refs.

### Methods
- `focus()`: Programmatically set focus to the input element.
- `blur()`: Programmatically remove focus from the input element.

### Usage Example
```vue
<template>
  <div>
    <vue-tel-input
      ref="telInput"
      v-model="phone"
    />
    <button @click="focusInput">Focus Phone Input</button>
    <button @click="blurInput">Blur Phone Input</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
const telInput = ref(null);

const focusInput = () => {
  telInput.value?.focus();
};

const blurInput = () => {
  telInput.value?.blur();
};
</script>
```
```

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

### Use vue-tel-input Component Directly

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/docs/guide/installation.md

Demonstrates how to use the vue-tel-input component directly within a Vue template. This approach is useful for specific instances where you don't need global registration or want to apply unique configurations.

```html
<template>
  <vue-tel-input v-model="phone" mode="international"></vue-tel-input>
</template>

<script>
  import { ref } from 'vue';
  import { VueTelInput } from 'vue-tel-input';
  import 'vue-tel-input/vue-tel-input.css';

  export default {
    components: {
      VueTelInput,
    },

    setup() {
      const phone = ref(null);

      return {
        value,
      };
    },
  };
</script>
```

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

### Local Component Usage

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/docs/guide/installation.md

How to import and use the VueTelInput component directly within a specific Vue component.

```APIDOC
## Local Component Usage

### Description
Import the VueTelInput component locally to use it within specific templates.

### Implementation
```html
<template>
  <vue-tel-input v-model="phone" mode="international"></vue-tel-input>
</template>

<script>
import { VueTelInput } from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

export default {
  components: { VueTelInput },
  setup() {
    const phone = ref(null);
    return { phone };
  }
};
</script>
```
```

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

### Lazy Loading Vue Tel Input Component

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Demonstrates asynchronous loading of the vue-tel-input component using `defineAsyncComponent` and dynamic imports. This technique, combined with webpack chunk naming, helps reduce the initial bundle size for better performance.

```vue
<template>
  <Suspense>
    <vue-tel-input v-model="phone" />
  </Suspense>
</template>

<script>
import { ref, defineAsyncComponent } from 'vue';

const VueTelInput = defineAsyncComponent(() =>
  Promise.all([
    import(/* webpackChunkName: "vue-tel-input" */ 'vue-tel-input'),
    import(/* webpackChunkName: "vue-tel-input" */ 'vue-tel-input/vue-tel-input.css'),
  ]).then(([module]) => module.VueTelInput)
);

export default {
  components: {
    VueTelInput,
  },
  setup() {
    const phone = ref('');
    return { phone };
  },
};
</script>
```

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

### Event Handling

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Documentation for events emitted by the component for validation and state changes.

```APIDOC
## Component Events

### Description
Listen to component events to handle validation results and country selection changes.

### Events
- **validate** (object) - Emitted on input change. Returns an object containing: valid (boolean), possible (boolean), country (object), nationalNumber (string), formatted (string).
- **country-changed** (object) - Emitted when the user selects a new country from the dropdown.
- **on-input** (string, object, element) - Emitted on every keystroke, providing the raw number, phone object, and input element.

### Response Example
{
  "valid": true,
  "possible": true,
  "country": { "name": "United States", "iso2": "US", "dialCode": "1" },
  "nationalNumber": "5551234567",
  "formatted": "+1 555-123-4567"
}
```

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

### Input Events: @blur, @focus, @enter, @space

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Standard input events for handling focus management and keyboard interactions within the phone input field.

```APIDOC
## Events: @blur, @focus, @enter, @space

### Description
Standard input events for handling focus management and keyboard interactions.

### Method
`@blur`, `@focus`, `@enter`, `@space`

### Usage Example
```vue
<template>
  <vue-tel-input
    v-model="phone"
    @blur="onBlur"
    @focus="onFocus"
    @enter="onEnter"
    @space="onSpace"
  />
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');

const onBlur = (event) => {
  console.log('Input lost focus', event);
};

const onFocus = (event) => {
  console.log('Input gained focus', event);
};

const onEnter = (event) => {
  console.log('Enter key pressed', event);
};

const onSpace = (event) => {
  console.log('Space key pressed', event);
};
</script>
```
```

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

### Component Events

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Documentation for handling user interactions and validation state changes via events.

```APIDOC
## Event: @on-input

### Description
Fires whenever the input value changes.

### Payload
- **number** (string) - The raw input string.
- **phoneObject** (object) - Contains parsed data (country, countryCode, nationalNumber, formatted, valid, possible).
- **inputElement** (HTMLInputElement) - Reference to the DOM element.

## Event: @validate

### Description
Fires when the phone number validity changes or on component mount.

### Payload
- **phoneObject** (object) - Contains validation status (valid, possible) and country details.

## Event: @country-changed

### Description
Fires when the selected country changes.

### Payload
- **country** (object) - Contains country details (name, iso2, dialCode, priority, areaCodes).
```

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

### Handling Input Events in Vue Tel Input

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Shows how to use standard input events like @blur, @focus, @enter, and @space with the vue-tel-input component. These events are essential for managing focus and responding to keyboard interactions.

```vue
<template>
  <vue-tel-input
    v-model="phone"
    @blur="onBlur"
    @focus="onFocus"
    @enter="onEnter"
    @space="onSpace"
  />
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');

const onBlur = (event) => {
  console.log('Input lost focus', event);
  // Trigger validation on blur
};

const onFocus = (event) => {
  console.log('Input gained focus', event);
  // Clear error messages on focus
};

const onEnter = (event) => {
  console.log('Enter key pressed', event);
  // Submit form on enter
};

const onSpace = (event) => {
  console.log('Space key pressed', event);
  // Custom space handling if needed
};
</script>
```

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

### Lazy load vue-tel-input

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/README.md

Technique to asynchronously import the component and its CSS to reduce initial bundle size and improve page load performance.

```javascript
const VueTelInput = () =>
  Promise.all([
    import(/* webpackChunkName: "chunk-vue-tel-input" */ 'vue-tel-input'),
    import(/* webpackChunkName: "chunk-vue-tel-input" */ 'vue-tel-input/vue-tel-input.css'),
  ]).then(([{ VueTelInput }]) => VueTelInput);

export default {
  components: {
    VueTelInput,
  },
};
```

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

### Handling Dropdown Open/Close Events in Vue

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Demonstrates how to use the @open and @close events to detect when the country dropdown in vue-tel-input opens or closes. This is useful for managing component states or triggering analytics.

```vue
<template>
  <div>
    <vue-tel-input
      v-model="phone"
      @open="onDropdownOpen"
      @close="onDropdownClose"
    />
    <p>Dropdown is {{ isOpen ? 'open' : 'closed' }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
const isOpen = ref(false);

const onDropdownOpen = () => {
  isOpen.value = true;
  console.log('Dropdown opened');
  // Track analytics, manage scroll, etc.
};

const onDropdownClose = () => {
  isOpen.value = false;
  console.log('Dropdown closed');
};
</script>
```

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

### Lazy Loading

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Load the component asynchronously to reduce initial bundle size using dynamic imports with webpack chunk naming.

```APIDOC
## Lazy Loading

### Description
Load the component asynchronously to reduce initial bundle size using dynamic imports with webpack chunk naming.

### Usage Example
```vue
<template>
  <Suspense>
    <vue-tel-input v-model="phone" />
  </Suspense>
</template>

<script>
import { ref, defineAsyncComponent } from 'vue';

const VueTelInput = defineAsyncComponent(() =>
  Promise.all([
    import(/* webpackChunkName: "vue-tel-input" */ 'vue-tel-input'),
    import(/* webpackChunkName: "vue-tel-input" */ 'vue-tel-input/vue-tel-input.css'),
  ]).then(([module]) => module.VueTelInput)
);

export default {
  components: {
    VueTelInput,
  },
  setup() {
    const phone = ref('');
    return { phone };
  },
};
</script>
```
```

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

### Handle Input Changes with @on-input Event in vue-tel-input

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Demonstrates how to use the `@on-input` event to capture changes in the input value. The event provides the raw number string, a detailed phone object with parsed data, and a reference to the input element, enabling real-time processing and logging.

```Vue
<template>
  <vue-tel-input
    v-model="phone"
    @on-input="onInput"
  />
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');

const onInput = (number, phoneObject, inputElement) => {
  console.log('Raw number:', number);
  // Example: "+15551234567"

  console.log('Phone object:', {
    country: phoneObject.country,           // "US"
    countryCode: phoneObject.countryCode,   // "US"
    nationalNumber: phoneObject.nationalNumber, // "5551234567"
    formatted: phoneObject.formatted,       // "+1 555 123 4567"
    valid: phoneObject.valid,               // true
    possible: phoneObject.possible,         // true
  });

  console.log('Input element:', inputElement);
  // HTMLInputElement reference for direct DOM access
};
</script>
```

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

### Programmatically Controlling Input Focus/Blur in Vue

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Explains how to use template refs to access and call the exposed `focus` and `blur` methods of the vue-tel-input component programmatically. This is useful for imperative control over the input's focus state.

```vue
<template>
  <div>
    <vue-tel-input
      ref="telInput"
      v-model="phone"
    />
    <button @click="focusInput">Focus Phone Input</button>
    <button @click="blurInput">Blur Phone Input</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
const telInput = ref(null);

const focusInput = () => {
  telInput.value?.focus();
};

const blurInput = () => {
  telInput.value?.blur();
};
</script>
```

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

### Use vue-tel-input Component in Vue Template

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/docs/guide/getting-started.md

Demonstrates how to use the vue-tel-input component within a Vue.js template. It shows a basic implementation using v-model to bind the input value.

```html
<template>
  <vue-tel-input v-model="phone"></vue-tel-input>
</template>
```

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

### Add vue-tel-input to Vue App

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/docs/guide/getting-started.md

Integrates the vue-tel-input plugin into your Vue.js application. This involves importing the necessary modules and using app.use() to register the plugin.

```javascript
import Vue from 'vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

const app = createApp(App);
app.use(VueTelInput);
app.mount('#app');
```

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

### Apply Custom Styles with styleClasses in vue-tel-input

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Illustrates how to apply custom CSS classes to the `vue-tel-input` component's wrapper using the `styleClasses` prop. This allows for easy styling customization, including conditional classes like `has-error`.

```Vue
<template>
  <vue-tel-input
    v-model="phone"
    :style-classes="['my-tel-input', 'form-control', { 'has-error': hasError }]"
  />
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
const hasError = ref(false);
</script>

<style>
.my-tel-input {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.my-tel-input.has-error {
  border-color: red;
}
</style>
```

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

### Dropdown Events: @open and @close

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

These events fire when the country dropdown opens or closes, allowing for management of focus states or triggering analytics.

```APIDOC
## Events: @open and @close

### Description
Fire when the country dropdown opens or closes. Useful for managing focus states or triggering analytics.

### Method
`@open`, `@close`

### Usage Example
```vue
<template>
  <div>
    <vue-tel-input
      v-model="phone"
      @open="onDropdownOpen"
      @close="onDropdownClose"
    />
    <p>Dropdown is {{ isOpen ? 'open' : 'closed' }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
const isOpen = ref(false);

const onDropdownOpen = () => {
  isOpen.value = true;
  console.log('Dropdown opened');
};

const onDropdownClose = () => {
  isOpen.value = false;
  console.log('Dropdown closed');
};
</script>
```
```

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

### Configure Preferred Countries for Vue-Tel-Input

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Sets a list of ISO2 country codes to appear at the top of the dropdown menu. This improves user experience by highlighting frequently used countries.

```vue
<template>
  <vue-tel-input
    v-model="phone"
    :preferred-countries="['US', 'CA', 'GB', 'AU', 'DE', 'FR']"
    :dropdown-options="{
      showDialCodeInList: true,
      showFlags: true,
    }"
  />
</template>

<script setup>
import { ref } from 'vue';
const phone = ref('');
</script>
```

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

### Globally Register vue-tel-input Component

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/docs/guide/installation.md

Integrates the vue-tel-input component globally into your Vue application. This method allows for setting default global options that will apply to all instances of the component unless overridden.

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

const globalOptions = {
  mode: 'auto',
};

const app = createApp(App);
app.use(VueTelInput, globalOptions); // Define default global options here (optional)
app.mount('#app');
```

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

### Configure Input Field Attributes

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Applies native HTML attributes and custom CSS classes to the phone input field to match application design and accessibility standards.

```vue
<template>
  <vue-tel-input
    v-model="phone"
    :input-options="{
      autocomplete: 'tel',
      autofocus: true,
      id: 'phone-input',
      inputmode: 'tel',
      maxlength: 20,
      name: 'phone',
      placeholder: 'Enter your phone number',
      readonly: false,
      required: true,
      tabindex: 1,
      type: 'tel',
      styleClasses: 'custom-phone-input',
      showDialCode: true,
      'aria-describedby': 'phone-help',
    }"
  />
  <span id="phone-help">Enter phone number with area code</span>
</template>

<style>
.custom-phone-input {
  font-size: 16px;
  padding: 12px;
}
</style>
```

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

### Customize Dropdown Options

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Configures the appearance and behavior of the country selection dropdown, including search functionality, flag display, and accessibility labels.

```vue
<template>
  <vue-tel-input
    v-model="phone"
    :dropdown-options="{
      ariaLabel: 'Select your country',
      disabled: false,
      showDialCodeInList: true,
      showDialCodeInSelection: true,
      showFlags: true,
      showSearchBox: true,
      searchBoxPlaceholder: 'Search country...',
      tabindex: 0,
    }"
  />
</template>

<script setup>
import { ref } from 'vue';
const phone = ref('');
</script>
```

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

### Create Custom Tel Input Component (Vue)

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/docs/usage/custom-form-of-vue-form-generator.md

Defines a custom input component 'tel-input.vue' that extends vue-form-generator's abstractField mixin and integrates with vue-tel-input. This component can then be registered and used in form schemas.

```html
<template>
  <vue-tel-input v-model="value"></vue-tel-input>
</template>

<script>
  import { abstractField } from 'vue-form-generator';

  export default {
    name: 'TelephoneInput',
    mixins: [abstractField],
  };
</script>
```

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

### Implement Custom Validation Logic

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Allows developers to pass a custom regular expression for advanced input validation, supplementing the component's built-in validation rules.

```vue
<template>
  <vue-tel-input
    v-model="phone"
    :custom-validate="/^[0-9+\-\s()]*$/"
    :auto-format="false"
    @validate="onValidate"
  />
</template>

<script setup>
import { ref } from 'vue';
const phone = ref('');
const onValidate = (phoneObject) => {
  console.log('Is valid:', phoneObject.valid);
};
</script>
```

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

### Slot: icon-right

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Add a custom icon or element to the right side of the input field, commonly used for validation indicators.

```APIDOC
## Slots: icon-right

### Description
Add a custom icon or element to the right side of the input field, commonly used for validation indicators.

### Usage Example
```vue
<template>
  <vue-tel-input
    v-model="phone"
    @validate="onValidate"
  >
    <template #icon-right>
      <span v-if="isValid" class="validation-icon valid">✓</span>
      <span v-else-if="phone" class="validation-icon invalid">✗</span>
    </template>
  </vue-tel-input>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
const isValid = ref(false);

const onValidate = (phoneObject) => {
  isValid.value = phoneObject.valid;
};
</script>

<style>
.validation-icon {
  padding: 0 8px;
  font-weight: bold;
}
.validation-icon.valid {
  color: green;
}
.validation-icon.invalid {
  color: red;
}
</style>
```
```

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

### Slot: arrow-icon

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Customize the dropdown arrow icon using a custom component or HTML element.

```APIDOC
## Slots: arrow-icon

### Description
Customize the dropdown arrow icon using a custom component or HTML element.

### Slot Props
- `open` (boolean): Indicates if the dropdown is currently open.

### Usage Example
```vue
<template>
  <vue-tel-input v-model="phone">
    <template #arrow-icon="{ open }">
      <span class="custom-arrow" :class="{ rotated: open }">
        ▼
      </span>
    </template>
  </vue-tel-input>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
</script>

<style>
.custom-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 10px;
  color: #666;
}

.custom-arrow.rotated {
  transform: rotate(180deg);
}
</style>
```
```

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

### Disable vue-tel-input Component

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Shows how to disable the entire `vue-tel-input` component, including the input field and country dropdown, using the `disabled` prop. A button is provided to toggle the disabled state, demonstrating dynamic control.

```Vue
<template>
  <div>
    <vue-tel-input
      v-model="phone"
      :disabled="isDisabled"
    />
    <button @click="isDisabled = !isDisabled">
      Toggle Disabled
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('+1 555 123 4567');
const isDisabled = ref(true);
</script>
```

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

### Adding Custom Right Icon with Slots in Vue Tel Input

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Demonstrates using the #icon-right slot in vue-tel-input to add custom elements, such as validation indicators, to the right side of the input field. It reacts to the @validate event to show appropriate icons.

```vue
<template>
  <vue-tel-input
    v-model="phone"
    @validate="onValidate"
  >
    <template #icon-right>
      <span v-if="isValid" class="validation-icon valid">✓</span>
      <span v-else-if="phone" class="validation-icon invalid">✗</span>
    </template>
  </vue-tel-input>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
const isValid = ref(false);

const onValidate = (phoneObject) => {
  isValid.value = phoneObject.valid;
};
</script>

<style>
.validation-icon {
  padding: 0 8px;
  font-weight: bold;
}
.validation-icon.valid {
  color: green;
}
.validation-icon.invalid {
  color: red;
}
</style>
```

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

### Enable Strict Phone Validation with vue-tel-input

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Demonstrates how to enable strict phone number validation using the `strict-validation` prop. This prop utilizes full libphonenumber-js metadata for more accurate validation, though it may increase the bundle size. The `onValidate` event handler logs the validation result.

```Vue
<template>
  <vue-tel-input
    v-model="phone"
    :strict-validation="true"
    @validate="onValidate"
  />
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');

const onValidate = (phoneObject) => {
  // With strictValidation: true
  // - Uses libphonenumber-js/max (dynamically loaded)
  // - More precise pattern matching
  // - Validates against actual phone number patterns
  // - Adds ~145KB to bundle (loaded on demand)

  console.log('Strict validation result:', phoneObject.valid);
};
</script>
```

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

### Enable or Disable Auto-Formatting

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Controls whether the input field automatically formats the phone number as the user types. This provides immediate visual feedback based on the selected mode.

```vue
<template>
  <div>
    <vue-tel-input
      v-model="phone1"
      :auto-format="true"
      mode="international"
    />
    <vue-tel-input
      v-model="phone2"
      :auto-format="false"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const phone1 = ref('');
const phone2 = ref('');
</script>
```

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

### Customizing Dropdown Arrow Icon using Slots in Vue

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Illustrates how to customize the dropdown arrow icon in vue-tel-input using the #arrow-icon slot. This allows for custom styling or replacement of the default arrow with any HTML or component.

```vue
<template>
  <vue-tel-input v-model="phone">
    <template #arrow-icon="{ open }">
      <span class="custom-arrow" :class="{ rotated: open }">
        ▼
      </span>
    </template>
  </vue-tel-input>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
</script>

<style>
.custom-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 10px;
  color: #666;
}

.custom-arrow.rotated {
  transform: rotate(180deg);
}
</style>
```

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

### Filter Countries with onlyCountries and ignoredCountries

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Restricts the dropdown list to a specific subset of countries or excludes specific countries from appearing. Useful for region-specific applications.

```vue
<template>
  <div>
    <vue-tel-input
      v-model="phone1"
      :only-countries="['US', 'CA', 'MX']"
    />
    <vue-tel-input
      v-model="phone2"
      :ignored-countries="['KP', 'IR', 'SY']"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const phone1 = ref('');
const phone2 = ref('');
</script>
```

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

### Use Custom Tel Input in Form Schema (JavaScript)

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/docs/usage/custom-form-of-vue-form-generator.md

Demonstrates how to use the registered 'field-tel-input' component within the fields array of a vue-form-generator schema. The 'type' property is set to 'tel-input' to reference the custom field.

```js
var schema: {
  fields: [
    {
      type: 'tel-input',
      label: 'Awesome (tel input)',
      model: 'telephone',
    },
  ],
};
```

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

### Register Custom Field Globally (JavaScript)

Source: https://github.com/iamstevendao/vue-tel-input/blob/main/docs/usage/custom-form-of-vue-form-generator.md

Registers the custom 'TelephoneInput' component globally as 'field-tel-input' using Vue.component. This makes it available for use in vue-form-generator schemas.

```js
import Vue from 'vue';
import TelInput from '<path>/tel-input.vue';

Vue.component('field-tel-input', TelInput);
```

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

### Detect Country Changes with @country-changed Event in vue-tel-input

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Demonstrates the use of the `@country-changed` event, which fires when the selected country in the `vue-tel-input` component changes. The event handler receives a country object containing details like name, ISO2 code, and dial code, allowing for dynamic updates based on country selection.

```Vue
<template>
  <div>
    <vue-tel-input
      v-model="phone"
      @country-changed="onCountryChanged"
    />
    <p v-if="selectedCountry">
      Selected: {{ selectedCountry.name }} ({{ selectedCountry.dialCode }})
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
const selectedCountry = ref(null);

const onCountryChanged = (country) => {
  selectedCountry.value = country;

  console.log('Country object:', {
    name: country.name,       // "United States"
    iso2: country.iso2,       // "US"
    dialCode: country.dialCode, // "1"
    priority: country.priority, // 0
    areaCodes: country.areaCodes, // null or array
  });
};
</script>
```

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

### Restrict Input to Valid Characters

Source: https://context7.com/iamstevendao/vue-tel-input/llms.txt

Enforces strict input validation by allowing only characters valid for phone numbers, such as digits, plus signs, and hyphens.

```vue
<template>
  <vue-tel-input
    v-model="phone"
    :valid-characters-only="true"
    @on-input="handleInput"
  />
</template>

<script setup>
import { ref } from 'vue';
const phone = ref('');
const handleInput = (number, phoneObject) => {
  console.log('Sanitized input:', number);
};
</script>
```

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