Summary

After creating a new project with Nuxt3, I encounter mysterious ESLint errors in VSCode.

For example, in the following code:

<script setup lang="ts">
const { params } = useRoute()
const { data } = await useFetch('/api/fetchCardById', {
  query: {
    id: params.id
  }
})
</script>

an error No overload matches this call. is raised.

In practice, the program runs without any issues, and no errors are displayed in the browser console.

Additionally, if I remove lang=”ts”, the error disappears.

Environment Setup Steps

1. Create a Nuxt3 project

npx nuxi@latest init <project-name>

1. Install the packages

$ npm i -D @nuxt/eslint eslint

2. Configure nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  // Added here
  modules: [
    '@nuxt/eslint',
  ],
})

3. Configure eslint.config.mjs

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  {
    rules: {
      indent: ['error', 2],         // Indentation is 2 spaces
      quotes: ['error', 'single'],  // Quotes are single
      semi: ['error', 'never']      // No semicolons
    }
  },
)

4. Configure .vscode/settings.json

{
  "eslint.experimental.useFlatConfig": true,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
}

Consultation

I would like advice on how to make ESLint work correctly when lang=”ts” is set. Thank you in advance.

I tried upgrading the versions of ESLint and Nuxt, and reinstalling plugins, but the issue was not resolved.