Shadcn Vue Phone Input

Shadcn Vue Phone Input: Modern & Customizable Phone Input for Vue.js

Shadcn Vue Phone Input is a specialized input component for Vue.js applications, built upon the Shadcn UI framework. It provides a sleek, modern phone number input field adhering to Shadcn's design principles. Developed to address the need for a Shadcn-styled phone input in the Vue ecosystem, it offers extensive customization by leveraging the base-vue-phone-input library and Shadcn UI components. This solution aims to provide developers with a ready-to-use, aesthetically pleasing, and functional phone input.

Features:

• Disable Browser Locale: Option to prevent using the browser's default locale for country detection (via noUseBrowserLocale prop).
• Automatic Country Fetching: Enables fetching the country automatically (via fetchCountry prop).
• Custom Country Locale: Specify the locale for displaying country names (e.g., country-locale=\"en-EN\").
• Exclude Countries: Ability to exclude specific countries from the selector list (e.g., :ignored-countries=\"['AC']\").
• Customizable Country Selector Slot: Allows full customization of the country selector UI using Vue slots and components like Popover, Command, and Button.
• Customizable Input Field Slot: Provides a slot to define the appearance and behavior of the phone number input field itself, integrating with components like Shadcn's Input.
• Country Flag Component Integration: Example demonstrates integrating a FlagComponent to display country flags, which dynamically loads images from an external source.
• Shadcn Design System Adherence: Built with Shadcn's sleek and modern design principles, based on Shadcn UI's input component.
• Vue.js Native Component: Specifically designed as a native component for Vue.js applications.
• Leverages base-vue-phone-input: Built upon the base-vue-phone-input library for core phone input logic and customization.
• Searchable Country List in Example: Example implementation includes a searchable list of countries within the selector for user convenience.
• Popover-based Selector Example: Demonstrates using a Popover component for a clean and interactive country selection dropdown in the example usage.

Summary:

Shadcn Vue Phone Input empowers developers to integrate a sophisticated, Shadcn-styled phone number input into their Vue projects. It features a customizable country selector with flag display and search, alongside a flexible input field. By building on base-vue-phone-input and utilizing Shadcn UI components for its structure and styling, this component simplifies adding international phone inputs with a consistent, modern look and feel, enhancing user experience in forms.