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>

I looked for this question/info on the forum and github, but did not find it, so sorry if if has already been said or answered somewhere

How long do you plan to keep support/update the quasar v1? Do you plan to add new features in v1 too? For how long? Or will you only fix bugs and things like that?

Thanks!

@Hawkeye64 and @s-molinari Thank you for your answers!

@s-molinari Hi, any updates about the results?

Hi,

@currycode I would say that using v-model of the drawer and click event for elements inside it, it should do the work. You have some closely related examples in the docs

 <q-drawer
        v-model="showDrawer"
      >
        <q-scroll-area class="fit">
          <q-list>
            <q-item clickable v-ripple @click="showDrawer = !showDrawer">
              <q-item-section avatar>
                <q-icon name="inbox" />
              </q-item-section>
           </q-item>
(...)
        </q-list>
    </q-scroll-area>
 </q-drawer>

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>

I would use the reveal event (see docs )

In template:

<q-header reveal elevated class=“bg-pink-10 q-pa-xs text-white animate” height-hint=“98” 
@reveal="handleReveal"
:class="isRevealed ? 'revealed' : 'not-revealed'"
>
...
</q-header>

in script:

handleReveal(isRevealed) {
  this.isRevealed = isRevealed;
//do something else if you want
}

and in style you can add css-transition

.revealed {
  background-color:rgba(255,255,255,0.94);
  transition: background-color 0.25s ease-in-out;
}

.not-revealed {
  background-color:rgba(255,255,255,0.01);
  transition: background-color 0.25s ease-in;
}

This is a start, hope it might help.

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

I’m looking forward to see the results!

@metalsadman I just tried it, it does not change anything.
I added getters, it works better.

One issue I have, it’s that I am not able to lazy-register my stores. I’ve tried many many different things and I am getting hydration issue (likely due to data difference between front and ssr) and vuex namespace duplicates. So, for now, I am registering my vuex modules/stores globally in the index, it is not optimal but at least it is working!

@beets
Thank you for your answer. Of course I’ve tried this.home = this.$store.state.cms.all; (That’s why I have those console.log, because I tried to find if it was hidden somewhere, and it was!).

And, that’s what I thought about during sleep : I did not make a getter.