With vue-i18n it gives types error of $t and $i18n usage

[dhavalt091]

As soon as i enable/install Vue Language Features (Volar) in VS code, i get type errors in html wherever $t and $i18n is used.

<template> <h1>{{ $t('views.home.title') }}</h1> <h1>{{ $i18n.locale }}</h1> </template>
Above is my html.

And below is how i get errors/warnings by volar.

What am i missing here?

[UfukUstali]

It might be related to this I am not sure tough.

nuxt-modules/i18n#2483 (comment)

[Nick-Hopps]

the same issue #3735

[rchl]

There were issues with types unrelated to Volar, as the linked issue states.
Please provide a repo that reproduces and also make sure you are using latest versions of the module.

[so1ve]

Duplicate of #3735

[rchl]

I'm not sure if those are duplicates. One is using nuxt module and one is using (older) version of vue-i18n

[so1ve]

Sorry, didn't notice that 😅 I'll reopen this issue to investigate further

[rchl]

We should wait for reproduction instead of investigating as there were known issues with types in i18n nuxt module that might be fixed already.

[so1ve]

So I added the pending triage label to wait for @dhavalt091's input :)

[dhavalt091]

It might be related to this I am not sure tough.

nuxt-modules/i18n#2483 (comment)

I am using Vue 3. Not nuxt.

[UfukUstali]

The issue mentioned in that comment was caused by Vue i18n which nuxt i18n does also use under the hood.

[dhavalt091]

Using below versions.

 "vue": "^3.2.47",
 "vue-i18n": "^9.2.2",

Vue Language Features (Volar) v1.8.24

In Home.vue with just simple usage it's reproducible.

<template>
    <h1>{{ $t('views.home') }}</h1>
    <h1>{{ $i18n.locale }}</h1>
</template>

This is nothing related to nuxt

[rchl]

In Home.vue with just simple usage it's reproducible.

Provide a repo that reproduces.
It's relevant how the project is set up. The specific component you are showing is not enough.
And if vue-i18n itself doesn't extend Vue types then it would be your responsibility to do that, not Volar's.

It might be a better question for the vue-i18n repo, to be honest.

[dhavalt091]

If error highlights without this extension then it would be vue-i18n repo.
I have just above template in Home.vue file. No script ta as well. This is enough to reproduce the issue.
How can i create reproduction repo? Online tools like stackblitz doesn't provide a way to add extension in it.

[rchl]

No, just a snippet of code is not enough. It's also relevant which packages are installed and in what versions. And the tsconfig.json configuration. And many other variables...

Just create a project that reproduces and put it on stackblitz or github. Then someone can download it locally and check with Volar.

[Nick-Hopps]

Because I have a monorepo with [email protected] installed, and the main version I use is [email protected]. The package '@vue/runtime-core' under the root node_modules belongs to 3.2.47, and 'vue/node_modules' /@vue/runtime-core' is what 3.3.4 actually uses. So the type definition of vue-i18n does not take effect

[Nick-Hopps]

I don't know how to configure npm workspace to force installing sub package's vue inside their respective node_modules, so I just remove workspaces config in the root package.json and run npm install then add the config back and run npm install -w packages/*, once the "@vue/runtime-core" version under root project is ok, the issue will be gone.