vue-tel-input with Quasar

Coude

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 ;).

jo06

Hello,

I’m interested by this topic too.

Regards.

Coude

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>

strife-cloud

https://www.npmjs.com/package/vue-tel-input here a repo that integrate beautifully vue-tel-input

Here an exemple to make it work with q-form:

           <q-field
              v-model="bookingPhoneNumber"
              borderless
              :rules="[isRequired, isPhoneNumberValid]"
            >
              <vue3-q-tel-input
                v-model:tel="bookingPhoneNumber"
                class="pr-b-tel-input pronto-input"
                default-country="fr"
                :label="t('generic.phoneNumber')"
                rounded
                outlined
                @error="isPhoneNumberInError = $event"
              />
            </q-field>

    const isPhoneNumberInError = ref(false);
    async function isPhoneNumberValid(): Promise<boolean | string> {
      // sleep 100ms
      await new Promise((r) => setTimeout(r, 100));
      return (
        !isPhoneNumberInError.value || 'Rentrer un numéro de téléphone valide'
      );
    }

No More Posting New Topics!

vue-tel-input with Quasar