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.


  • 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.

        label="Your phone number"
    /* note: the height 98% is to avoid the inner input to hide the bottom border of q-field */
    .input-vue-tel-input-in-qfield {
      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);
    import { VueTelInput } from 'vue-tel-input';
    export default {
      name: 'InputPhone',
      props: {
      components: {
      data() {
        return {
          isError: false,
      methods: {
        handleInput (val, objVal) {
          console.log(val, objVal);
          this.isError = !objVal.isValid;

Log in to reply