Registry / web-framework / vue-tel-input

vue-tel-input

library9.8.0jsnpmunverified

Vue Tel Input is a Vue.js component that provides an international telephone input field, integrating country code selection, formatting, and validation. It leverages `libphonenumber-js` for robust and accurate parsing, formatting, and validation of phone numbers according to international standards. The current stable version is `9.8.0`, with regular minor and patch releases addressing bugs, improving features like TypeScript support, accessibility, and updating underlying dependencies. Key differentiators include its dedicated Vue 3 support (with a separate legacy branch for Vue 2), flexible installation options (global plugin, local component, or lazy loading for performance), and comprehensive customization capabilities for styling and behavior. It offers a standardized solution for handling diverse international phone number inputs in web applications.

web-framework communication

npm install vue-tel-input

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-TEL-INPUT

vue-tel-input

web-frameworkjavascriptv9.8.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueTelInput (global)

✓ import VueTelInput from 'vue-tel-input'; app.use(VueTelInput);

✗ import { VueTelInput } from 'vue-tel-input'; app.use(VueTelInput);

When using `app.use()` for global plugin registration, the default export of the package is expected. Incorrectly using a named import for this purpose will lead to errors.

VueTelInput (component)

✓ import { VueTelInput } from 'vue-tel-input';

✗ import VueTelInput from 'vue-tel-input';

For direct component usage, especially within `<script setup>` or the `components` option, `VueTelInput` is exported as a named export. Attempting to use the default export in this context may not work as expected or is deprecated.

CSS Styles

✓ import 'vue-tel-input/vue-tel-input.css';

✗ import 'vue-tel-input/dist/vue-tel-input.css';

The correct path for importing the component's essential styles. Older versions or misconfigurations might lead to attempts to import from the `dist` directory, which is incorrect for recent versions and module bundlers.

Demonstrates basic usage of `vue-tel-input` as a local component within a Vue 3 setup script, binding its value to a reactive reference and importing the necessary styles.

<template> <vue-tel-input v-model="phone" mode="international"></vue-tel-input> </template> <script lang="ts"> import { ref, defineComponent } from 'vue'; import { VueTelInput } from 'vue-tel-input'; import 'vue-tel-input/vue-tel-input.css'; export default defineComponent({ components: { VueTelInput, }, setup() { const phone = ref<string | null>(null); return { phone, }; }, }); </script>

Debug

Known issues

breakingStarting from `v9.3.0`, `libphonenumber-js` and `vue` were moved to peer dependencies. They must now be explicitly installed in your project.

fix

Run `npm install libphonenumber-js vue` in your project directory.

affects: >=9.3.0

gotchaTypeScript declaration files were historically incorrect or missing in versions prior to `v9.8.0`, leading to potential type errors or incomplete IntelliSense.

fix

Update to `vue-tel-input@9.8.0` or higher to ensure correct and complete TypeScript exports. If using an older version, you might need to add `skipLibCheck: true` to your `tsconfig.json` as a temporary workaround, though this is not recommended.

affects: <9.8.0

gotchaThe CSS import path was fixed in `v9.2.0`. Older versions might have used a different or incorrect path, leading to styles not being applied.

fix

Ensure you are using `import 'vue-tel-input/vue-tel-input.css';` for styles. Avoid deprecated or incorrect paths like `vue-tel-input/dist/vue-tel-input.css`.

affects: <9.2.0

gotchaWhen implementing component lazy loading, it's crucial to load both the JavaScript component and its CSS asynchronously and correctly, typically using `Promise.all` with bundlers like Webpack/Rollup. Importing CSS via Vue SFC `<style>` tags in lazy-loaded components can cause the CSS to be bundled with the main vendor chunk instead of being lazy-loaded.

fix

Follow the lazy loading example in the official documentation, ensuring both `import('vue-tel-input')` and `import('vue-tel-input/vue-tel-input.css')` are part of the asynchronous loading process, and avoid `<style>` tags for component CSS in such scenarios.

affects: >=9.0.0

Errors

Common errors & fixes

Cannot find module 'libphonenumber-js' or its corresponding type declarations.

The `libphonenumber-js` package, a peer dependency, is not installed in your project.

fix

`npm install libphonenumber-js`

Property 'VueTelInput' does not exist on type 'typeof import("vue-tel-input")'.

Attempting to use `app.use({ VueTelInput })` or a named import when `app.use()` expects the default export for global registration.

fix

Use the default import for global registration: `import VueTelInput from 'vue-tel-input'; app.use(VueTelInput);`

Module not found: Error: Can't resolve 'vue-tel-input/dist/vue-tel-input.css'

An incorrect or deprecated path is being used to import the component's CSS styles.

fix

Update your CSS import statement to: `import 'vue-tel-input/vue-tel-input.css';`

TypeError: Cannot read properties of undefined (reading 'install') when using `app.use(window['vue-tel-input'])` in browser.

The `vue-tel-input` script loaded via CDN did not automatically install or `window['vue-tel-input']` is not the correct reference to the plugin's install function.

fix

Ensure Vue is loaded before `vue-tel-input` for automatic installation. If installing manually, verify the global variable name and that the plugin object has an `install` method.

Upgrade

Version history

9.8.0latest on npm

Audit

Dependencies

libphonenumber-jsrequiredProvides international phone number parsing, validation, and formatting logic.

vuerequiredRequired Vue.js framework for component rendering.

Agent activity

40 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/iamstevendao/vue-tel-input ↗

packagehttps://www.npmjs.com/package/vue-tel-input ↗

homepagehttps://vue-tel-input.netlify.app ↗