Skip to content

Typescript error (ts2339) when using $t in template #93

@FlorentinBurgeat

Description

@FlorentinBurgeat

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

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions