vue3-q-tel-input

index.html

<div id="q-tel-app">
  <div class="q-pa-md row items-start q-gutter-md">
    <div class="display-flex">
      <h6 class="q-ma-none q-mb-sm">Default input</h6>
      <q-card class="q-mb-md">
        <q-card-section class="q-pa-sm">
          <label>Telephont Number:</label>
          <vue3-q-tel-input v-model:tel="defaultTelephone" />
        </q-card-section>
      </q-card>
      <h6 class="q-ma-none q-mb-sm">1. <code>default-coutry</code></h6>
      <small>This will change the default country to the corresponding one that is used, eg: de</small>
      <q-card class="q-mb-md">
        <q-card-section class="q-pa-sm">
          <label>Telephont Number:</label>
          <vue3-q-tel-input v-model:tel="telWithCountry" default-country="de" />
        </q-card-section>
      </q-card>
      <h6 class="q-ma-none q-mb-sm">2. <code>eager-validate</code></h6>
      <small>This will avoid validations on the inital load</small>
      <q-card class="q-mb-md">
        <q-card-section class="q-pa-sm">
          <label>Telephont Number:</label>
          <vue3-q-tel-input v-model:tel="telWithCountry" :eager-validate="false" />
        </q-card-section>
      </q-card>
      <h6 class="q-ma-none q-mb-sm">2. <code>search-text</code></h6>
      <small>This will change the search text on the country selection dropdown</small>
      <q-card class="q-mb-md">
        <q-card-section class="q-pa-sm">
          <label>Telephont Number:</label>
          <vue3-q-tel-input v-model:tel="telWithCountry" search-text="Choose a country" />
        </q-card-section>
      </q-card>
    </div>
  </div>
</div>

script.typescript

const { ref } = Vue;
const { useQuasar } = Quasar;

const app = Vue.createApp({
  setup() {
    return {
      defaultTelephone: ref(""),
      telWithCountry: ref("")
    };
  }
});

app.use(Vue3QTelInput);
app.use(Quasar, { config: {} });
app.mount("#q-tel-app");

scripts

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.umd.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-q-tel-input@latest/dist/vue3-q-tel-input.min.js"></script>

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.prod.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vue3-q-tel-input@latest/dist/vue3-q-tel-input.esm.css" rel="stylesheet" />

vue3-q-tel-input.markdown

vue3-q-tel-input

The live code update for the GitHub repo https://github.com/CdTgr/vue3-q-tel-input

A Pen by CodeTiger on CodePen.

License.