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

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.

Hi,

A few weeks ago I setup a Quasar project using the CLI, with typescript, using prettier (all chosen via the CLI).
Since then, I’ve had parsing errors, today I decided that it was enough and I should make them dissapear, but I can’t get it done. This is the errors that I get on every single .vue file when it is open (error is highlighted on first line).

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: src\components\Folder\File.vue.
The file must be included in at least one of the projects provided.

The config is the default one:

parserOptions: {
    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#configuration
    // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#eslint
    // Needed to make the parser take into account 'vue' files
    extraFileExtensions: ['.vue'],
    parser: '@typescript-eslint/parser',
    project: resolve(__dirname, './tsconfig.json'),
    tsconfigRootDir: __dirname,
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module' // Allows for the use of imports
  },

Does this mean that my project variable is not correct? I tried a few things and they all results with the error, except if I do not set the project, but that most likely results in something wrong for the linter, doesn’t it?

I don’t understand why the path src\components\Folder\File.vue is not included in the project?

Did anyone faced the same problem, and if so, how did you solve it?
Thanks!

@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!

Hello everyone and sorry for the basic question, I’ve never had to do any custom inputs components, and I’ve been trying for 2 hours. I know this is an easy solve for a lot of you, so here goes!

I have a “custom” input that I use at several places in my application, so I want to refactor this input.
Its code is the following:

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

This works as intended. Now, I am trying to put this input inside a component of its own, and make it work like v-model, but I can’t make it work, and my browser keep saying I’m trying to mutate it directly. Here’s where I’m at:

The DateInput Component:

<template>
  <q-input
    stack-label
    :label="label"
    :value="value"
    @input="$emit('input', $event.target.value)" // Also tried v-model
  >
    <template v-slot:append>
      <q-icon name="event" class="cursor-pointer">
        <q-popup-proxy>
          <q-date
            :value="value"
            @input="$emit('input', $event.target.value)" // Also tried v-model
            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']
});
</script>

And how I use it:

<date-input :label="$t('date')" v-model="document.date" /> 
// Also tried passing a normal prop (:date="document.date"), but haven't made it work that way either.

I’ve tried several mix of v-model and/or :value and @input, but I can’t figure it out.
I’m quite new to VueJS and my application has come a long way, I just never did any custom inputs!
If anyone has something similar or knows how to solve this, I would greatly appreciate it.
Thanks!