Here is my set up :

1. npm i --save vue-phone-number-input

2. create vue-phone-number-input.js to /plugins
   import VuePhoneNumberInput from "vue-phone-number-input" import "vue-phone-number-input/dist/vue-phone-number-input.css" Vue.component("vue-phone-number-input", VuePhoneNumberInput)

3. add ~nuxt.config.js
   plugins: [ "~/plugins/vue-phone-number-input" ],

4. in my component
   <VuePhoneNumberInput v-model="phone"/>

Vue warning :
[Vue warn]: Unknown custom element: <VuePhoneNumberInput> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

now preferredCountries sort is not support,

for example

if the given preferredCountries is ['FR', 'BE', 'DE']

the actual effect is ['BE', DE''FR', '], is sort by the first char.

Component works well, but the css file is 435k. I think the main reason is the base64 images of the country flags. It's making my bundle size too large.

It would be great if you could use unicode country flags instead and get rid of the images -- http://xahlee.info/comp/unicode_flags.html

I've set the :error-prop because I needed to do some custom validation, however I found that the label is still red even after the component has successfully validated the input.

I feel like .lm-text-danger should only be set if isValid is false and error is true, not just if error is true (I'm just making an assumption that that's how it's being done now). Or alternatively override the CSS for .lm-text-danger when is-valid is present (which is how I solved it).

hello! nice plugin.

can I automatically set the country code when a user visits the site? I have an API to get the user's country. and I would like to automatically set the country based on the results of this api

I've tried working on the only-countries attribute and it seems that it is having issues.

CODE:

RESULT:

I found myself adding a class to my wrapper component in order to apply "is valid" styles (by checking the data returned from update-event). Would prefer that the component itself added this class (semi related to #47 as this would likely clash with is-focused).

It's possible to provide a prop to disable the "example" Label inside the input field ?

A coworker of mine on Windows reported an issue with IE 11 and changing country, you can only change it once, then you're unable to unless you start typing a phone number.

While the phone number is present, you are able to change country freely like in any other browser, but removing it will return back to not being able to change country.

Did not report any console errors.

When you pass a phonenumber with country code the component doesn't behave like it should (Select correct country in list, strip countrycode and display correctly)

Expected Array, got String with value "['FR', 'BE', 'DE']".

<VuePhoneNumberInput placeholder="Place Holder Text" ></VuePhoneNumberInput>

Unable to change the place holder attribute.
"version": "1.0.1",

Description

Getting Wrong Country Code Selected, It is happened after some time When you start the play with phone number.

A clear and concise description of what the bug is.

Steps to reproduce

Example:

1. Click on country list dropdown
2. Start typing like sin, ind
3. Select a country
4. reopen country list by clicking on dropdown
5. Select any country then you will not get expected result. like if you select India then the random code will reflect on page.

Expected behavior

Same country code should be displayed after selecting from dropdown

Screenshots

Device

• OS: iOS
• Browser: Chrome 75,

Hello, if you input a number like the example, the second character changes to a 9 automatically...

Try to input 011 15 or 011 11

Also i would like to change argentinian example label, is this possible?

It might be very helpful to show the country code as well as the flag/country name when using the Country Code pulldown. It displays once a country is chosen, but having it also display in the list would be nice. This component is AWESOME!

The input element doesn't have the required-attribute, only aria-required, so right now this component does not support HTML5 form validation.

In an empty control, if you click on the label in the control that says "Phone number", the control DOES NOT receive focus. If you click to the left, right, top, or bottom of the words "Phone number", though, it does receive focus.

Hi.
Thank you for that. Can we add a visual customization if someone want to use vuetify component for example?

Is your feature request related to a problem? Please describe

I want to use a phone number input in NativeScript Vue but there is no such module.

Describe the solution you'd like

Maybe it would be possible to port this module to NativeScript. Most likely just the elements need to be changed (e.g. <div>, etc.)

Describe alternatives you've considered

There is no alternative yet.

I'm excited and disappointed too about this feature 😭

I think it's very important part for phone input component, also It improves user experience, when user just types number and component can automatically recognize the country code.

What you think about it? 🤔

When individual types in letters or other characters except for numbers in the field:

Additional form validation should be in place, some suggestions:

• the validation example should pop up already
• there's a way to inform them that numbers only are allowed
• No value is being added in the field and the validation label will pop up, informing them to that numbers are only allowed

Thanks and nice work on this component. :)

If you click on a flag it submits the form that is parent to the element.

b030255#r36668986

Is your feature request related to a problem? Please describe

Can't import the component in main.ts. Error:

Could not find a declaration file for module 'vue-phone-number-input'. Try `npm install @types/vue-phone-number-input` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-phone-number-input';`

Describe the solution you'd like

Add declaration file and enable usage with Typescript.

Dark theme works perfectly.
However, setting disabled prop to true disable the dark theme.

As quick and dirty fix, I use pointer-events: none to simulate a read only field:

Is there any way to change selected country after the component has been displayed?

I have default-country-code set to:

:default-country-code="phone_country"

When changing phone_country selected country is not changing in the form.

I am getting an infinite render loop using this component in Framework7 under certain conditions:

vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in a component render function.

found in

---> <CountrySelector> at CountrySelector.vue
       <VuePhoneNumberInput> at index.vue
         <F7PageContent>
           <F7Page>
             <PhonePage> at src/components/PhonePage.vue
               <F7View>
                 <F7App>
                   <App> at src/App.vue
                     <Root>

The conditions are:

1. vue-phone-number-input component is registered inline in the parent
2. parent is routed page component module defined in SFC
   If these conditions are different (e.g., global registration, or declared as inline template), then it works fine.

I also observed that if comment out some of the code in CountrySelector's onFocus method, then the error does not occur, although the selector doesn't open either. It seems to be a focus-blur infinite loop, perhaps having to due with how the vue-click-outside directive is used, but I'm not sure.

Here is a repro repo: https://github.com/jacobg/f7-phone-input
Demos:

• infinite loop (you'll need to use Chrome Task Manager to kill it) - https://jacobg.github.io/f7-phone-input
• works fine inline - https://jacobg.github.io/f7-phone-input/inline.html

This issue is not related to issue #2. It occurs regardless of that issue fixed or not.

Here is forum post discussing this issue more at length:
http://forum.framework7.io/t/difference-in-behavior-between-inline-templates-and-sfc-templates/5884

If I am using this input inside a form and going to select a country code then form submit event call because you did not define the type of button (Where to presenting the country code list). I think it is small issue but we can fixed it easily to add the type "button"

When I try to use this plugin in laravel 5.8, I get an error saying the element is not know recognize the custom element. Is there an issue with the element or am using it wrongly?

On editing, the country code does not match

I include the VuePhoneNumberInput inside another component:

...
<script>

  import VuePhoneNumberInput from 'vue-phone-number-input'

  export default {
    components: {
      vphone: VuePhoneNumberInput,
...

This causes the next error:

"export 'default' (imported as 'VuePhoneNumberInput') was not found in 'vue-phone-number-input'

It happens with version 0.2.5 and higher up to last release.

On mobile phone in Chrome it takes at least 3 seconds to open countries dropdown first time (https://louismazel.github.io/vue-phone-number-input/). Maybe there is a way to improve it, some kind of precaching, etc?

package.json contains:

  "types": "dist/index.d.ts"

But, when installed from NPM, this file isn't included.

Thanks.

If you enter the first 3 digit area code, you will not be able to backspace and delete it.

In my Laravel+Vue.js SPA ( Single Page Application) I am using the phone number input validation package from here, BootstrapVue from here and Veevalidate from here .

I think I need to show only the code inside my component file. The vue-phone-number-input component shows blue border and HTML5 error message tooltip (?) upon invalid data but no error message appears in red as it happens with name field. My code follows in EditProfile.vue:

<ValidationObserver ref="form" v-slot="{ passes }">

    <div id="registration_form">

        <b-form @submit.prevent="passes(onSubmit)" @reset="resetForm">

            <ValidationProvider vid="name" rules="required|min:2" name="name" v-slot="{ valid, errors }">
                <b-form-group
                        label="User Name:"
                        label-for="exampleInput1"

                >
                    <b-form-input
                            type="text"
                            v-model="name"
                            :state="errors[0] ? false : (valid ? true : null)"
                            placeholder="Enter your name"
                    ></b-form-input>

                    <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>

                </b-form-group>

            </ValidationProvider>


            <ValidationProvider vid="mobile" rules="required" name="mobile" v-slot="{ valid, errors }">
            <b-form-group
                    label="Mobile:"
                    label-for="exampleInput1"

            >

                <vue-phone-number-input

                        v-model="mobile"
                        default-country-code="BD"
                        required
                        disable-leading-trailing-space
                        :state="errors[0] ? false : (valid ? true : null)"
                        @update="updatePhoneNumber"
                        placeholder="Enter Mobile Number"
                />

               <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>

            </b-form-group>
        </ValidationProvider>



            <b-button type="submit" variant="primary">Submit</b-button>
            <b-button type="reset" variant="danger">Reset</b-button>

        </b-form>

    </div><!-- end of id registration_form-->
</ValidationObserver>`

JS part inside EditProfile.vue is:

`import Datepicker from 'vuejs-datepicker';
import { ValidationObserver, ValidationProvider } from "vee-validate";

export default {
name: "EditProfile",
components: {
ValidationObserver,
ValidationProvider,
Datepicker
},
data: () => ({
name: "",
mobile:""
}),
methods: {

   onSubmit() {
        console.log("Form submitted yay!");
              },

    resetForm() {
        this.name = "";
        this.mobile = "";
        requestAnimationFrame(() => {
            this.$refs.form.reset();
        });
    }

}
};`

When the submit button is pressed then validation works for name field nad for vue-phone-number-input it also happens but no error message shows up in red color.

My Vue.js version is 2.6.10 and I used the latest versions of BootstrapVue and Veevalidate (3) as well.

How can I make the error message appear in red color for vue-phone-number-input element ?

If you go to https://louismazel.github.io/vue-phone-number-input/, the page doesn't render, and you'll see this error:
Multiple definitions of a property not allowed in strict mode

The error is in the component itself, because my own app using this component also has the error.

Like portugal (+351), when the prefilled number (+351345912678) has the country code of portugal the input doesn't recognize the correct code

in the example bellow the number +351345912678 was prefilled in the phone-number-input's v-model when page loaded

I only need to validate phone numbers against a single country. It would be nice if I could set a default country and hide the country code component altogether.

Hi! Is there a way to translate country names?😢

https://github.com/LouisMazel/vue-phone-number-input/blob/master/src/VuePhoneNumberInput/assets/js/phoneCodeCountries.js

Inline styles (border 1px solid $color !important, etc) makes customization impossible with CSS.
It is worth adding the ability to disable focus styles like validation styles (no-validator-state).

The class is-focused stays after phone number is validated/valid, which makes things look a little weird in my example (here I have clicked off the component, so it shouldn't be focused):

I've fixed it locally by using :focus-selector, but is-focused shouldn't really stay after the element is not focused.

i have an issue, please help me to figure out the problem.

i have a phone number value stored in DB as "+92 322 3661422", when i fetch the edit phone number form, vue-phone-number-input does not parsing the country code from the v-model and showing country code 2 times.
please see attachment

My database design has 2 fields for the phone number one for dial code and the other for the national number so i need these 2 values separately anyone can help me how to extract them separately

Hi,

Do you have a suggestion how we could hide the border that appears whenever we focus one of the 2 fields (country selector & input field). I have attached a screenshot.
It gets added by an !import inline-style so I can't really set the border to 0 by overriding the css.

I restyled the component a bit for my usecase so it fits better within my vuetify application, but I don't really like the orange border :-)

Thanks

How do i access the payload data "isValid" to make sure that the value input must be valid before moving to the next step

Hi! I don't know if this feature would be good or not.
Since we are able to show validation of format by changing the color of our input's border, maybe we can activate the max length of the input field based on the example format.

This can be an option if other developers wants to limit it or not because maybe some countries might allow different type of phone number formats. I'm not sure.

Thanks :)

It would be good to have an option to allow to display empty country option in the dropdown.

First of all, nice component!

This component is a composition of country code and local number. But it seems that the v-model is just the formatted local number. How do I bind the whole thing? Ideally, it would be able to bind to the E.164 phone number, which is the formattedNumber field in the object emitted by onUpdate event.

When fetch-country is true, the input autofocuses. This is probably due to https://github.com/LouisMazel/vue-phone-number-input/pull/64/files#r363379503