vue-tel-input with Quasar



  • Hi,

    I am planning to use vue-tel-input ( here ) in my quasar app (made using vue-cli). Do anyone has some experience with it?
    More precisely, I would like to know if we may manage to get the quasar/material look using this component (if I wrap it inside a QField, would it be enough?). If you have some advices, I would be glad to hear it ;).



  • Hello,

    I’m interested by this topic too.

    Regards.



  • Hi,

    This is a start, probably far from perfect, but enough to use vue-tel-input with quasar without too much pain. It is fast and easy solution, which works ok.

    <template>
      <q-field
        label="Your phone number"
        stack-label
        :error="isError">
        <vue-tel-input
          :wrapper-classes="['no-border','no-box-shadow','no-ouline','wrapper-vue-tel-input-in-qfield']"
          input-classes="input-vue-tel-input-in-qfield"
          @input="handleInput"
        >
        </vue-tel-input>
      </q-field>
    </template>
    
    <style>
    /* note: the height 98% is to avoid the inner input to hide the bottom border of q-field */
    .input-vue-tel-input-in-qfield {
      height:98%;
      margin-bottom: auto;
    }
    
    /* note: I use color dark for my text, I am forcing it because otherwise it is the same color as q-field - so here primary color or negative color when error - */
    .wrapper-vue-tel-input-in-qfield li.vti__dropdown-item {
      color: var(--q-color-dark);
    }
    </style>
    
    <script>
    import { VueTelInput } from 'vue-tel-input';
    
    export default {
      name: 'InputPhone',
      props: {
        //
      },
      components: {
        VueTelInput,
      },
      data() {
        return {
          isError: false,
        }
      },
      methods: {
        handleInput (val, objVal) {
          console.log(val, objVal);
          this.isError = !objVal.isValid;
        }
      },
    }
    </script>
    

Log in to reply