-
-
Notifications
You must be signed in to change notification settings - Fork 315
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
global $t show issue #1403
Comments
I'm having the same issue.
to
in the vie-i18n package.json fixed the issue for me when running it locally. |
I have the same problem. The situation for me is that I upgrade |
I have the same issue. |
I was getting this error even with version 9.3.0-beta.17. |
Thank you for your reporting! Issue template said:
Could you give us your minimal reproduction with github repo or stackbliz please? 🙏 |
No problem, I will try to do it this week-end... ;) |
Hi @kazupon, I cannot share my repository, but I can provide further details, I have the same problem. Here is the full error message
|
I ran in to this going from With declare module '@vue/runtime-core' {
...
$t<
Key extends string,
DefinedLocaleMessage extends RemovedIndexResources<DefineLocaleMessage> = RemovedIndexResources<DefineLocaleMessage>,
Keys = IsEmptyObject<DefinedLocaleMessage> extends false
? PickupPaths<{
[K in keyof DefinedLocaleMessage]: DefinedLocaleMessage[K]
}>
: never,
ResourceKeys extends Keys = IsNever<Keys> extends false ? Keys : never
>(
key: Key | ResourceKeys | Path
): TranslateResult
...
} With |
The same issue with 9.3.0-beta-19, so I downgraded to 9.3.0-beta-18. |
I'm on 9.2.2 using vite and typescript and when building it shows the error below. When using the development server, everything is fine. But building throws this error:
|
@kazupon "exports": {
".": {
"types": "./dist/vue-i18n.d.ts",
// ...
},
}, |
I was able to suppress this warning with a custom typescript definition. Therefore it's not needed to change the package.json in node_modules. Of course, this is not a real fix, but at least I can build the project again. i18n.d.ts: export {};
declare module 'vue' {
interface ComponentCustomProperties {
$t: (key: string) => string;
$tm: (key: string) => []|{[p: string]: any};
}
} If you use more/other function of i18n you may need to add the to the interface. |
It's probably just another workaround for the moment but I specifically referenced the types path and declared the vue-i18n module in the env.d.ts file: env.d.ts
|
The problem with this is that it only fixes the most simple calls to I was able to also cover these by copying the type definition directly from export {};
declare module 'vue' {
interface ComponentCustomProperties {
$t: ComposerTranslation<
Messages,
Locales,
RemoveIndexSignature<{
[K in keyof DefineLocaleMessage]: DefineLocaleMessage[K];
}>
>;
$tm: Composition['tm'];
}
} Same thing you mentioned also applies here: If you are using other functions, you gotta add the type definitions for them. As I said, they can be found in |
@kazupon As this ticket is still on Now, as this is not an issue on the runtime but on type checking, execute the following command in the console to see the actual error: You should get this response in console:
|
@dkern Your issue has fixed at v9.3.0, so if you would like to use, you can install v9.3.0-beta.25 |
@kazupon
EDIT: It is fixed with |
Thank you @kazupon. I've tested it in the example on stackbliz and it seems to work. But I'm not allowed to use beta channels in these projects, so I have to wait for the release. Is there any estimated time when 9.3 will be released? @bkis I can't confirm that. In the example, when I install 9.3.0-beta.25 it doesn't throw any errors. Do you use any other command for type check? |
Someone opened an issue for the BETA 14 issue : #1481 I can confirm that $t works again in BETA 26. Make sure to check package-lock.json to know which version is installed. EDIT : adding the NPM command: |
Hi, I'm using version
but inside the script of the same component I got an error
How can I use a global variable $t inside scripts to not import useI18n for each component? |
@hugorabelo I think |
@bkis Thanks. I already read this document, but my question is: Am I always need to define this |
Just create yourself a file where you configure your i18n plugin. There you can also do an export of the functions you frequently need to use. For example: import { createI18n } from 'vue-i18n';
const i18n = createI18n({ ... });
const { t, tm } = i18n.global;
export const $t = t;
export const $tm = tm; And where ever you need them you can now just import the functions directly, like: import { $t } from './path/to/file';
$t('translate your message'); But of course, you always need to import them where you want to use it. You could make this variable also globally available in script if you prefer it that way: https://stackoverflow.com/a/65349231/6498658 |
Nice, thanks. Could be a little more concise this way: export const { t: $t, tm: $tm } = i18n.global; |
Thanks, everyone. I understood the idea. Also, I checked that global properties should be used only in Options API. For composition API, we should import everything. It's working now |
Hello, I am using
But when using $t in the template, I have a ts error showing: I have checked that the installed package is exactly Do you think I need to define the ComponentCustomProperties interface as mentioned in the answers ? Thank you, |
try to remove old node_moduls and package-lock file and reinstall |
Because I have a monorepo with vue@3.2.47 installed, and the main version I use is vue@3.3.4. 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 |
We're using Yarn Workspace. Removing all |
I'm facing the same issue with vue-i18n@9.9.1 and vue@3.4.15 in pnpm monorepo, |
Maybe this helps creating a patch: In Like this: This is btw also the way how the vue docs do augmentation: https://vuejs.org/api/utility-types.html#componentcustomproperties I don't know whether there is a reason why it is like this or not. For the time being I just created a local patch. |
Thank you for your feadback! More infoWhy do I need to provide a reproduction?Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. What will happen?If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect. If How can I create a reproduction?We have a couple of templates for starting with a minimal reproduction: 👉 Reproduction mininal starter A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as minimal as possible. You might also find these other articles interesting and/or helpful: |
Reporting a bug?
The global variable "$t" show issue 'Property '$t' does not exist on type' in vue template
My ./i18n/index.ts files :
My main.ts file :
My template file :
Expected behavior
No issue :D
Reproduction
System Info
Screenshot
No response
Additional context
No response
Validations
The text was updated successfully, but these errors were encountered: