✨ Open source

Vue Input Phone Shadcn

The Vue Input Phone Shadcn library is an open source project, based on Shadcn. It offers an excellent component for entering phone numbers, supporting 194 countries, with automatic formatting and advanced validation to detect invalid formats. Plus, it's highly customizable.

Demo

Component integrated with AutoForm

Component integrated with Shadcn's AutoForm, with validation via Zod. To access it, click here to access the component .

Configure components:

1

1 - Install components

To get started, install the necessary Shadcn components by running the following commands in the terminal:

Terminal

2
2 -  Install vMaska 
 To format the number, install the vMaska library: 
Terminal
3
3 -  Component PhoneInput 
 In your components folder, create a new subfolder called "phone". Then add a file called PhoneInput.vue and insert the following code: 
~/components/phone/Code.vue
4
4 -  Component FlagCountry 
 Now, create a file called FlagCountry.vue in the phone folder and add the following content: 
~/components/phone/FlagCountry.vue
5
5 -  Countries 
 Now let's add the JSON that contains the country information and corresponding phone formatting. To do this, create a file called countries.ts: 
~/components/phone/countries.ts
6
6 -  Export 
 Finally, to export the PhoneInput.vue component, create a file called index.ts inside the phone folder: 
~/components/phone/index.ts