Quasar + Vetur + TypeScript

  • Hi, I’ve recently created a new project using the latest version available (right now, rc.4).

    I’m working on VSCode using Vetur extension and when I’m in any file (vue,ts), Vetur/Console throws an error on “$q” saying for example: "Property ‘$q’ does not exist on type ‘LoginPage’ and quasar “imports” like “components” arent working at all and it says "Cannot find module “components/…”.

    Any idea on how to fix this?

  • Hello! I have the same problem. Did you ever solve this @jjurado ?

  • Was this ever solved? I have the same problem with Quasar + Vue.js + TypeScript via Quasar plugin.

  • I was able to come up with a hack to solve this. Not sure if it makes sense but it solves my problem so I am happy. I created a file in my types folder called “types/shims-global.d.ts” with the following info:

    import Vue from ‘vue’;
    import { QVueGlobals } from ‘quasar’;

    declare module ‘vue/types/vue’ {
    interface Vue {
    $q: QVueGlobals

    The interesting thing is that the types are already available in the Quasar package but at any rate VSCode has stopped complaining so I think all is well for now. I assume it’s a bug or something that will be fixed eventually.

  • I am having the same problem. VSCode doesn’t seem to honor the module augmentation of Vue. Not even sure where to report this as a bug.

  • Same issue here. In the Quasar docs it says to update the Vue components by adding the tag <script lang="ts">.. But even when doing so the import doesn’t work.


    const routes = [
        path: '/',
        // component: () => import('../layouts/MainLayout.vue'),
        component: () => import('layouts/MainLayout.vue'),
        children: [
          { path: '', component: () => import('pages/Index.vue'), },
          { path: 'login', component: () => import('pages/Login.vue') },
          { path: 'tickets', component: () => import('pages/Tickets/Index.vue') },
          { path: 'settings', component: () => import('pages/Settings.vue') },
          { path: 'profile', component: () => import('pages/Profile.vue') ,}
    // Always leave this as last one
    if (process.env.MODE !== 'ssr') {
        path: '*',
        component: () => import('pages/Error404.vue'),
        children: []
    export default routes


      <q-layout view="hHh lpR fFf">
        <app-header />
        <app-SidebarNavigationMenu :links="mainNavigationLinks" />
          <router-view />
        <app-footer :links="mainNavigationLinks" />
    <script lang="ts">
    import { mapState } from "vuex"
    export default {
      computed: {
        ...mapState('navigation', ['mainNavigationLinks'])
      components: {
        appHeader: () => import("components/Header.vue"),
        appFooter: () => import("components/Footer.vue"),
        appSidebarNavigationMenu: () => import("components/SidebarNavigationMenu.vue"),

    Rerported error

    ERROR in T:/hc-it-portal/frontend/src/router/routes.ts(20,22):
    TS2322: Type 'Promise<typeof import("T:/hc-it-portal/frontend/src/pages/Error404.vue")>' is not assignable to type 'Promise<typeof import("T:/hc-it-portal/frontend/src/layouts/MainLayout.vue")>'.
      Type 'typeof import("T:/hc-it-portal/frontend/src/pages/Error404.vue")' is not assignable to type 'typeof import("T:/hc-it-portal/frontend/src/layouts/MainLayout.vue")'.
        Types of property 'default' are incompatible.
          Type '{ name: string; }' is missing the following properties from type '{ computed: { mainNavigationLinks: Computed; }; components: { appHeader: () => Promise<typeof import("T:/hc-it-portal/frontend/src/components/Header.vue")>; appFooter: () => Promise<...>; appSidebarNavigationMenu: () => Promise<...>; }; }': computed, components
    Version: typescript 3.8.3
    Time: 1656 ms

    If anyone found a solution, thank you for sharing it.

  • Figured it out thanks to a member on the team in the discords channel.

    You have to select a way how you will be writing your component: Options API, Class or Composition. Examples can be found here

Log in to reply