intlify / intlify/nuxt3

Typescript error (ts2339) when using $t in template

Open
#93 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
204
Forks
18
PR merge metrics
No merged PRs in 30d

Description

Hi,

I have a project with nuxt 3, and I was trying to add vue-i18n to the project. I've seen I should use this dependance instead.

I've followed the setup guide. But then, when I want to use $t in a template of a vue component, I have this issue displayed:
![image](https://user-images.githubusercontent.com/15621001/192796748-b1e5ed8d-2585-48e3-9395-40c8634e843a.png)

But when running the application, I have no issue, the text displays well and I have no error in the console. Just this annoying underlined issue in the code.

Here's my tsconfig:
```{
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"types": [
"@pinia/nuxt",
"@nuxt/types"
],
"paths": {
"#app": [
"./node_modules/nuxt3/dist/app/index"
],
"@/*": ["./*"]
}
}
}
```

My dependencies in package.json:
```
"devDependencies": {
"@iconify/json": "^2.1.10",
"@intlify/nuxt3": "^0.1.10",
"@nuxtjs/eslint-config-typescript": "^11.0.0",
"@pinia/nuxt": "^0.1.8",
"@typescript-eslint/eslint-plugin": "^5.38.0",
"@typescript-eslint/parser": "^5.38.0",
"@vueuse/nuxt": "^7.7.0",
"eslint": "^8.24.0",
"eslint-plugin-nuxt": "^4.0.0",
"eslint-plugin-vue": "^9.5.1",
"nuxt3": "3.0.0-27480376.fdd38f9",
"sass": "^1.54.7",
"sass-loader": "10",
"typescript": "^4.8.3",
"unplugin-vue-components": "^0.17.21",
"vite-plugin-eslint": "^1.8.1"
},
"dependencies": {
"@nuxt/types": "^2.15.8",
"jwt-decode": "^3.1.2",
"pinia": "^2.0.11",
"primeicons": "^5.0.0",
"primevue": "^3.16.2"
}
```

and my nuxt.config:
```
export default defineNuxtConfig({
ssr: false,
meta: {
title: 'A Better Nuxt 3 Starter'
},
buildModules: [
'@pinia/nuxt',
'@vueuse/nuxt',
[
'@intlify/nuxt3',
{
localeDir: 'locales',
vueI18n: {
locales: ['en', 'fr'],
defaultLocale: 'en',
fallbackLocale: 'en'
}
}
]
],
css: [
'primevue/resources/themes/saga-blue/theme.css',
'primevue/resources/primevue.css',
'primeicons/primeicons.css',
'@/assets/main.css'
],
// @ts-ignore
vite: {
plugins: [
eslintPlugin(),
ViteComponents({
dts: true
})
]
}
})
```

I think I miss something in my tsconfig. (Maybe not?) Do you have any idea?
Thank you!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.