nuxt3 icon indicating copy to clipboard operation
nuxt3 copied to clipboard

Typescript error (ts2339) when using $t in template

Open FlorentinBurgeat opened this issue 1 year ago • 0 comments

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!

FlorentinBurgeat avatar Sep 28 '22 13:09 FlorentinBurgeat