CODEWITHSUNDEEP
vue.jsinputdependenciesyarnpkgvue-tel-input
GNG
GNG

Reputation: 1531

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

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.sstatic.net/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>

Upvotes: 1

Views: 3048

Answers (2)

Mark O Brian
Mark O Brian

Reputation: 11

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/

Upvotes: 0

Geetansh Rathore
Geetansh Rathore

Reputation: 1

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

Upvotes: 0

Related Questions