@kingscode/vuetify-phone-input

Vuetify Phone Input

Example

Please refer to the TextField if you want to see which inherited props will be available.

Props

Name	Type	Default
value	string	''
countries	[]	countries
type	string	tel
placeholder	string	#
countryCode	string-number	''
prependCountryCode	boolean	true

Events:

Name	Return value	What
@country	string	The new selected country code
@phone	string	Equivalent to @change event, but with additional features. Gets called on blur

Installation

install the dependency

npm i @kingscode/vuetify-phone-input

Then just import the component in the file you need it

import VuetifyPhoneInput from '@kingscode/vuetify-phone-input';

And add it to the components in your vue file

  components: {
    VuetifyPhoneInput,
    ...

Usage

<template>
    <div>
        <VuetifyPhoneInput :countries="countries"
                           @country="onCountry"
                           @phone="onPhone"/>
    </div>
</template>

<script lang="js">
import VuetifyPhoneInput from '@kingscode/vuetify-phone-input';

export default {
    name: 'Home',
    components: {
        VuetifyPhoneInput
    },
    computed: {
        countries: () => [ // we can now provide our own list of countries + codes. Defaults to all possible countries.
            {
                code: 31,
                name: 'NL',
            },
            {
                code: 32,
                name: 'BE',
            },
        ],
    },
    methods: {
        onCountry(country) { // callback when the consumer changed the country code.
            console.log(country); // 32
        },
        onPhone(phone) { // callback when the consumer changed the phone number
            console.log(phone); // [phone]
        },
    },
};
</script>

If the consumer enters the following: [phone] when the current selected country does not match, the country will be adjusted accordingly.

Remember that this Phone Input is derived from the VTextField from Vuetify, meaning that you can still use the error-messages, or placeholder attributes for example.