@metalsadman Thanks, I deleted my initial reply because I thought it worked but then it didn’t. I fiddle around with what you told me, and for potential future readers, this is how I got it to work:

The component:

<template>
  <q-input stack-label :label="label" v-model="date">
    <template v-slot:append>
      <q-icon name="event" class="cursor-pointer">
        <q-popup-proxy>
          <q-date
            :value="date"
            @input="updateDate($event)"
            mask="YYYY-MM-DD"
          ></q-date>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'DateInput',
  props: ['value', 'label'],
  data() {
    return {
      date: this.value
    };
  },
  methods: {
    updateDate(date: string) {
      this.date = date;
      this.$emit('input', this.date);
    }
  }
});
</script>

How I use it:

<date-input :label="$t('date')" v-model="document.date" />

Thanks again!

EDIT: Updating quasar with quasar upgrade --install then restarting VSCode fixed my problem.

Hello,

I’ve been trying to add validations with Vuelidate to my quasar application but I have a little problem. I can make it work just fine, by my code is filled with red errors (even though it compiles and validation works as intended). Here are my configs:

Boot file (registered in quasar conf):

import Vuelidate from 'vuelidate';
import { boot } from 'quasar/wrappers';

export default boot(({ Vue }) => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  Vue.use(Vuelidate as any);
});

I can console.log(this.$v) just fine, use it on inputs like:

:error="$v.field.nested.$invalid"
error-message="test error"

with

validations: {
  field: {
    nested: {
      required
    }
  }
},

My problem is there, the whole validations property is red, even though data(), components, methods, etc aren’t. I’m using this syntax for my component:

export default Vue.extend({
...

Inside a <script lang=“ts”> tag.

Some error message I have:

Object literal may only specify known properties, and 'validations' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.

Property '$v' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

It also adds error on all my other properties, even though they work.
I feel like this is linked to TypeScript, but I’m not sure how to solve it.

Anyone else use Vuelidate with Quasar and Typescript? If so, how did you manage to not have all these errors?
Thanks.