Why does my vue-tel-input country code dropdown not format properly in my vuejs app?

Question

I installed the vue-tel-input library https://vuejsexamples.com/international-telephone-input-with-vue/ in my vuejs project. Why does my input field look like this with no country flags and no country code?

This may be related to an error I saw when installing the yarn library...

error /Users/xxx/Documents/Work/software/xx/xx/node_modules/vue-tel-input: Command failed.
Exit code: 1
Command: cd docs && npm ci --prefer-offline
Arguments: 
Directory: /Users/xxx/Documents/Work/software/xx/xx/node_modules/vue-tel-input
Output:
/bin/sh: line 0: cd: docs: No such file or directory
  [1]: https://i.stack.imgur.com/AwkyP.png

Here is my relevant component code...

<template>
  <div>
    <VueTelInput v-model="phoneNumber" v-bind="bindProps"></VueTelInput>
  </div>
</template>

<script>
 import { VueTelInput } from 'vue-tel-input'
 import 'vue-tel-input/dist/css/component.css'
 import 'vue-tel-input/dist/css/sprite.css'

 export default {
   name: 'CuiRegister',
   computed: {
     ...mapState(['settings']),
     loading() {
       return this.$store.state.user.loading
     },
   },
  components: { VueTelInput }
 }
</script>

score 0 · Answer 1 · answered Sep 01 '21 at 06:27

0

try to initialize the vue-tel-input in the main.js of Vue https://www.npmjs.com/package/vue-tel-input refer this link

answered Sep 01 '21 at 06:27

Geetansh Rathore

1
1

you don't have any bindProps in your code as you don't have a data method please remove it or make a data method and define the bindProps. – Geetansh Rathore Sep 01 '21 at 06:29
Please add further details to expand on your answer, such as working code or documentation citations. – Community Sep 01 '21 at 11:45
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Dennis Kozevnikoff Sep 01 '21 at 13:26

score 0 · Answer 2 · answered Jan 06 '22 at 07:57

You can use available props for the vue-tel-input library available here: https://iamstevendao.github.io/vue-tel-input/documentation/props.html

To add country flags and country codes you'll need to use dropdownOptions.showFlags and dropdownOptions.showDialCodeInList props resepectively. Remember dropdownOptions is an object hence you can include the prop as shown below:

<VueTelInput v-model="phoneNumber" :dropdownOptions = "{showFlags:true, showDialCodeInList:true}" v-bind="bindProps"></VueTelInput>

Here is a demo for the same: https://iamstevendao.github.io/vue-tel-input/

Why does my vue-tel-input country code dropdown not format properly in my vuejs app?

2 Answers2