1

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?

![enter image description here

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>
RobC
  • 22,977
  • 20
  • 73
  • 80
GNG
  • 1,341
  • 2
  • 23
  • 50

2 Answers2

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

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
0

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/

Mark O Brian
  • 11
  • 1