Quasar + Vetur + TypeScript

jjurado

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?

jvik

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

splayfee

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

splayfee

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.

TomKaltz

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.

DarkLite1

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.

routes.ts

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') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue'),
    children: []
  })
}
export default routes

MainLayout.vue

<template>
  <q-layout view="hHh lpR fFf">
    <app-header />

    <app-SidebarNavigationMenu :links="mainNavigationLinks" />

    <q-page-container>
      <router-view />
    </q-page-container>

    <app-footer :links="mainNavigationLinks" />
  </q-layout>
</template>

<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"),
  },
}
</script>

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.

DarkLite1

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…

No More Posting New Topics!

Quasar + Vetur + TypeScript