Seems very basic but I can't find anywhere an eslint setup that works with Nuxt3 auto-import, to avoid no-undef errors. I'm not using typescript.

I tried the following packages: @antfu/eslint-config, plugin:nuxt/remended, @nuxt/eslint-config, @nuxtjs/eslint-config, @nuxt/eslint-config-typescript, with no luck so far.

The only thing that works for now is setting each reference in .eslintrc globals...

Seems very basic but I can't find anywhere an eslint setup that works with Nuxt3 auto-import, to avoid no-undef errors. I'm not using typescript.

I tried the following packages: @antfu/eslint-config, plugin:nuxt/remended, @nuxt/eslint-config, @nuxtjs/eslint-config, @nuxt/eslint-config-typescript, with no luck so far.

The only thing that works for now is setting each reference in .eslintrc globals...

• javascript
• vue.js
• nuxt.js
• eslint
• nuxt3.js

• 1 You can use explicit imports to avoid this problem. Implicit identifiers (whether global or scoped) are historically a mon source of bugs — ESLint is trying to help you here. – jsejcksn Commented Sep 5, 2023 at 12:23
• 1 Maybe, but Nuxt encourages using auto-imports, so you'd expect there to be a remended solution. – Conley Owens Commented Dec 25, 2023 at 23:59
• There is now an experimental cli tool that works pretty well, I tried it on Nuxt3 and Vue project as well. It will install required packages, update you eslint config and even .vscode settings, if that is what you're into. Simply run npx @antfu/eslint-config@latest. Read more on antfu/eslint-config. – Branislav Popadič Commented Jan 30, 2024 at 13:32

1 Answer 1

I only use the following packages:

"@antfu/eslint-config": "^0.42.0"
"eslint": "^8.49.0"

and in VSCode, I have installed extensions:

dbaeumer.vscode-eslint
vue.volar

and my .eslintrc.js:

module.exports = {
  extends: [
    '@antfu',
  ],
};

and my .vscode/settings.json:

{
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.options": {
        "extensions": [
          ".js",
          ".vue"
        ]
    },
}

This should acplish what you're looking for.

NOTE: You do have to - whether you are using Typescript or not - run nuxt dev at least once to have Nuxt generate types internally inside .nuxt for auto-imports to work and allow Volar + ESLint to function properly.

Also, ensure that Volar is running in Takeover mode.