Property '$q' does not exist on type 'CombinedVueInstance<Vue, ..>

[zsluedem]

<template>
    <q-btn @click="c"/>
<templage>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    name: "btn",
    methods:{
    c(){
    this.$q.loading.show()
    do_something()
    this.$q.loading.hide()
}
}
    
})
<script>

An ts error would occur.
Property '$q' does not exist on type 'CombinedVueInstance<Vue, ..>

[marco-quintella]

Same problem here...

Did a new fresh project generation and copied the files to the new one and solved the problem.

[zsluedem]

I used a // @ts-ignore to mute it. But obviously it is not a good solution.

[l1qu1d]

@zsluedem I can't reproduce the typescript definition error on my environment with the information you provided. To get more eyes on this potential problem, could you give more details of your environment/setup?

I hope that some of the settings below might work for you.

My current environment:

• Quasar: 1.2.1
• Quasar/app: 1.2.1
• Typescript: 3.6.4
• Editor: VS Code, Version: 1.39.1

My tsconfig.json:
{ "compilerOptions": { // "allowJs": true, "sourceMap": true, "target": "es6", "strict": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "baseUrl": ".", "noImplicitAny": false }, "exclude": ["node_modules", "dist"] }

My quasar.extensions.json:
{ "@quasar/typescript": { "webpack": "plugin", "rename": true, "vscode": true, "prettier": true } }

My VS Code extensions.json:
{ "recommendations": [ "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "octref.vetur" ] }

My VS Code settings.json:
{ "vetur.experimental.templateInterpolationService": true, "vetur.validation.template": false, "eslint.validate": [ "javascript", "javascriptreact", "typescript", { "language": "vue", "autoFix": true } ] }

Rework of example code so everyone can just copy and paste:

<template>
  <div>
    <q-btn @click="c" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'Btn',
  methods: {
    c() {
      this.$q.loading.show();
      window.setTimeout(() => {
        this.$q.loading.hide();
      }, 2000);
    }
  }
});
</script>

[zsluedem]

@l1qu1d
My current environment:

• Quasar/cli 1.1.3
• Quasar@app 1.1.3
• Typescript: 3.6.4
• Editor: VS Code, Version: 1.39.0

My tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "target": "es6",
    "strict": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "baseUrl": "."
  },
  "exclude": ["node_modules", "src/rnode-grpc-gen/js"]
  // "include": ["src/rnode-grpc-gen/js/rnode-grpc-js.d.ts"]
}

My quasar.extensions.json:

{
  "@quasar/typescript": {
    "webpack": "plugin",
    "rename": true,
    "vscode": true,
    "prettier": true
  }
}

My VS Code settings.json:

{
  "window.zoomLevel": 0,
  "workbench.colorTheme": "Monokai Pro (Filter Spectrum)",
  "workbench.iconTheme": "Monokai Pro (Filter Spectrum) Icons",
  "python.pythonPath": "/usr/local/opt/python/bin/python3.7",
  "breadcrumbs.enabled": true,
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnType": false,
  "formattingToggle.activateFor": [
    "formatOnSave"
  ],
  "diffEditor.ignoreTrimWhitespace": true,
  "rust.build_on_save": true,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "tslint.autoFixOnSave": [
    "semicolon"
  ],
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "typescript.format.placeOpenBraceOnNewLineForFunctions": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript"
}

Code:

<template>
  <div>
    <q-btn @click="c" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'Btn',
  methods: {
    c() {
      this.$q.loading.show();
      window.setTimeout(() => {
        this.$q.loading.hide();
      }, 2000);
    }
  }
});
</script>

[zsluedem]

I upgraded quasar to 1.2.1 and still got the typescript error

[zsluedem]

I updated the tsconfig.json like #39.

{
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "target": "es6",
    "strict": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "baseUrl": ".",
    "noEmit": true,
    "types":["quasar"]
  },
  "exclude": ["node_modules", "src/rnode-grpc-gen/js"]
  // "include": ["src/rnode-grpc-gen/js/rnode-grpc-js.d.ts"]
}

but it doesn't work.

[zsluedem]

I added a file vue.d.ts in src and it worked

// file vue.d.ts
import Vue from 'vue';
import { QVueGlobals } from 'quasar';

declare module 'vue/types/vue' {
  interface Vue {
    $q: QVueGlobals
  }
}

[marco-quintella]

I added a file vue.d.ts in src and it worked

// file vue.d.ts
import Vue from 'vue';
import { QVueGlobals } from 'quasar';

declare module 'vue/types/vue' {
  interface Vue {
    $q: QVueGlobals
  }
}

This already exists in Quasar Boxed types. Including quasar types in the tsconfig should works, but somehow it doesn`t...

[zsluedem]

Ok~! I find another solution for this.
I have to do the import anywhere in my project. Then typescript can find the types definitions.

put

import { QVueGlobals } from 'quasar';

anywhere in my project

[rfox12]

I recently moved to Typescript. In case someone else comes here... I found that tsconfig.json needs to be in the root directory of my VSCode project. vuejs/vetur#815

[IlCallo]

This should be solved by the latest tsconfig preset we serve from @quasar/app.
Try it out!
https://quasar.dev/quasar-cli/supporting-ts

[46319943]

I recently moved to Typescript. In case someone else comes here... I found that tsconfig.json needs to be in the root directory of my VSCode project. vuejs/vetur#815

The same for JavaScript projects, or projects that use the jsconfig.js file.
When there are multiple directories containing js/tsconfig.js in the workspace, problems will arise.

There are several Vue projects in my workspace. When I removed the other few from the workspace and only left one, the problem was solved

[MarcelFranken]

I have a JavaScript projects and dont use TypeScript but i also have this message:
Property '$q' does not exist on type 'CombinedVueInstance<Record<never, any> & Vue, object, object, object, Record<never, any>>'.

How can i fix this?!

[IlCallo]

@MarcelFranken
I'd argue that's impossible. That is a TS specific error and will not be fired into a JS codebase, maybe you enabled TS support by mistake?

Edit: just realized you just asked a question about JS codebase into the TS app-extension migration tool... Why are you even using this AE into a JS project?

[Andradeerik]

I have a JavaScript projects and dont use TypeScript but i also have this message:
Property '$q' does not exist on type 'CombinedVueInstance<Record<never, any> & Vue, object, object, object, Record<never, any>>'.

How can i fix this?!

I do not know if you have already solved it but in case someone is useful.

Make 2 examples, one with TS and the other with JS and notice that in the JS project that error appears but not in the TS and notice that the TS project has a file called (tsconfig.json) and you add it to the JS project and it no longer comes out the error I hope someone will solve it in a better way

[vandelpavel]

Remember to delete empty setup

Get same error but only in one page of the project.
Found that using composition api and creating a setup without returning anything will generate the error:

Removing the entire setup or uncommenting the return {}; eventually removes the error.

[vieruuuu]

i have this error too, no typescript