vue3-phone-number-input

International Phone Number Input with Country Code.

Getting started

Install the plugin:

• With npm

    npm install vue3-phone-number-input

• With yarn

    yarn add vue3-phone-number-input

• Add the plugin into your app:

    import { createApp } from 'vue'
    import App from './App.vue'
  
    import Vu3PhoneNumberInput from 'vue3-phone-number-input'
    import 'vue3-phone-number-input/dist/vue3-phone-number-input.css';
  
    const app  = createApp(App)
    .mount('#app')
  
    app.use(Vu3PhoneNumberInput)
  

Available options

    app.use(Vu3PhoneNumberInput, {
        placeholder: '11 111 11 11',
        countryPlaceholder: 'Search',
        countryLebel: 'Select Country',
    })

• Use the PhoneNumberWithCountryCode component:

  <template>
        <PhoneNumberWithCountryCode
            v-model:phone_number="form.phone_number" 
            v-model:country_code="form.country_code" 
        />

  </template>

    <script>
        import { reactive } from '@vue/reactivity'

        export default {
            name: 'App',
            setup() {
                const form = reactive({
                    phone_number: '',
                    country_code: ''
                })

                return {
                    form
                }
            },
        }
    </script>

Available props

    <template>
        <PhoneNumberWithCountryCode
            v-model:phone_number="form.phone_number" 
            v-model:country_code="form.country_code"
            placeholder="11 111 11 11"
            country-placeholder="Search"
            country-lebel="Select Country"
        />
  </template>