Vue: Property $t does not exist on type after upgrade

[Excel1]

What happened?

I upgraded my project from app-vite v1 to v2.

After (i did it 3 times to get sure) i finished the upgrade the linter found 180 errors and vue-tsc additionally 448 errors.
The lint maybe differ from the v1 version but $t from i18n is also marked with: Vue: Property $t does not exist on type.
The project builds (with these errors) but the IDE (in my case Webstorm) and the linter / vue-tsc marks as error.

What did you expect to happen?

After the upgrade i think it will work like a fresh install. I tried a project from ground up and it worked without any problems. I also copied the files and configs from the new project to the old but without any success.

Im sure i didnt miss a step but it seems like there is a step missing.

Reproduction URL

https://github.com/Excel1/quasar-bug-repo

How to reproduce?

Disclaimer
I cant provide a reproduction repo cause its my private code and i dont get problem elsewhere / in a new project. The given repository is the one, where i copied the files from to my project where the same happen when i followed the docs.

1. Own a Quasar v1 Repo with i18n and capacitor
2. Follow the documentation to upgrade
3. Receive eslint / vue-tsc errors

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SPA Mode

Platforms/Browsers

No response

Quasar info output

NodeJs - 18.18.2

Global packages
  NPM - 9.8.1
  yarn - Not installed
  pnpm - 9.5.0
  bun - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - 2.5.4
  cordova - Not installed

Important local packages
  quasar - 2.17.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.1 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.14 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.0
  pinia - 2.2.8 -- Intuitive, type safe and flexible Store for Vue
  vite - 6.0.3 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.16.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.24.0 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.5.4 -- TypeScript is a language for application scale JavaScript development
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/ios - 6.1.2 -- Capacitor: Cross-platform apps with JavaScript and the web

Quasar App Extensions
  *None installed*

Relevant log output

167 |       </q-toolbar>
    168 |       <q-card-section style="max-height: 50vh" class="scroll">
  > 169 |         <q-input filled v-model="readOnlyInvite.nickname" :label="$t('name')"
        |                                                                   ^^
    170 |                  readonly/>
    171 |         <q-input filled v-model="readOnlyInvite.code" :label="$t('invite_code')"
    172 |                  readonly/>
 


ERROR(vue-tsc)  Property '$t' does not exist on type 'CreateComponentPublicInstanceWithMixins<ToResolvedProps<ExtractPropTypes<{ teamId: { type: NumberConstructor; required: true; }; invite: { type: PropType<Invite>; required: true; }; }>, { ok: (...args: any[]) => void; hide: (...args: any[]) => void; }>, ... 24 more ..., {}>'.

Additional context

I can never be sure, that i didnt make a mistake - it always could be. But maybe some people got the same problems

[rstoenescu]

Hi,

Use the composition API not $t. Example: https://github.com/intlify/vue-i18n/blob/master/examples/type-safe/global-type-definition/src/components/HelloWorld.vue

This has nothing to do with Quasar itself.

[Excel1]

Why does it work in Quasar v1 like this and also in v2 (see given reproduction repo) .

Its only after the upgrade and it also compiles without any problems.

"In Composition API mode, the $t is injected by app. config. globalProperties."

[rstoenescu]

Quasar v1 is based on Vue 2, while Quasar v2 is Vue 3. So there is this, then vue-i18n has its own versioning. Please read the vue-i18n docs carefully. The vue-i18n is not part of Quasar.