Nuxt4 settings

.nvmrc

22.23.2

.prettierignore

.nuxt/
.output/
dist/
node_modules/
coverage/
.vite/
.cache/
public/

.prettierrc

{
  "semi": false,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "endOfLine": "auto",
  "singleAttributePerLine": true
}

README.md

Nuxt ESLint and Prettier template

This folder is a reusable baseline for adding ESLint and Prettier to an existing Nuxt 3 or Nuxt 4 project.

Required development dependencies

Install the required packages:

npm install --save-dev @nuxt/eslint eslint eslint-config-prettier prettier

Equivalent package manager commands:

pnpm add -D @nuxt/eslint eslint eslint-config-prettier prettier

yarn add --dev @nuxt/eslint eslint eslint-config-prettier prettier

Nuxt configuration

Add @nuxt/eslint to the existing modules array in nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ]
})

Add it to the project’s existing modules array rather than replacing the current modules.

Package scripts

Merge these entries into the existing scripts object in package.json:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier . --write",
    "format:check": "prettier . --check"
  }
}

File installation

Copy these files to the project root:

eslint.config.mjs
.prettierrc
.prettierignore

Existing legacy codebases

This template intentionally reports the initial lint backlog as warnings so that adoption is non-blocking. Teams can progressively promote important rules to errors over time. Repository-wide lint:fix or format should not be run blindly on a large existing application; formatting and lint cleanup should be reviewed in controlled, scoped changes.

Validation commands

Run these manually after installation:

npm install
npm run lint
npm run format:check

eslint.config.mjs

import prettierConfig from 'eslint-config-prettier'
import { withNuxt } from './.nuxt/eslint.config.mjs'

export default withNuxt([
  {
    ignores: [
      '.nuxt/**',
      '.output/**',
      'dist/**',
      'node_modules/**',
      'coverage/**',
      '.vite/**',
      '.cache/**',
      'public/**'
    ]
  },
  {
    files: ['**/*.{ts,tsx,vue}'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/no-unsafe-function-type': 'warn',
      '@typescript-eslint/no-dynamic-delete': 'warn',
      '@typescript-eslint/no-unused-vars': [
        'warn',
        {
          argsIgnorePattern: '^_',
          varsIgnorePattern: '^_',
          caughtErrorsIgnorePattern: '^_'
        }
      ],
      '@typescript-eslint/unified-signatures': 'warn',
      '@typescript-eslint/ban-ts-comment': 'warn',
      '@typescript-eslint/no-import-type-side-effects': 'warn',
      '@typescript-eslint/consistent-type-imports': 'warn',
      '@typescript-eslint/no-empty-object-type': 'warn'
    }
  },
  {
    rules: {
      semi: ['warn', 'never'],
      'arrow-parens': ['warn', 'always'],
      'comma-dangle': ['warn', 'never'],
      'vue/attribute-hyphenation': 'off',
      'vue/html-closing-bracket-newline': 'off',
      'vue/multi-word-component-names': 'off',
      'vue/no-multiple-template-root': 'off',
      'vue/require-default-prop': 'off',
      'vue/require-prop-types': 'off',
      'no-console': 'warn',
      'no-unused-vars': 'off',
      'no-undef': 'warn',
      'vue/no-v-html': 'warn',
      'vue/require-v-for-key': 'warn',
      'vue/valid-template-root': 'warn',
      'import/no-duplicates': 'warn',
      'import/first': 'warn',
      'vue/no-dupe-keys': 'warn',
      'vue/no-use-v-if-with-v-for': 'warn',
      'vue/return-in-computed-property': 'warn',
      'no-useless-assignment': 'warn',
      'no-empty': 'warn',
      'prefer-const': 'warn',
      'no-case-declarations': 'warn',
      'no-useless-escape': 'warn'
    }
  },
  prettierConfig
])