in nuxt 4 how to add vue/component-tags-order rule?

[Hetari]

In a Nuxt 4 project using ESLint module, how can I enable and configure the Vue ESLint rule vue/component-tags-order so that my <script setup> tag comes first, then <template>, then <style> in .vue files?

I already have eslint.config.mjs with withNuxt(), but when I try to add:

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs';
import prettierPlugin from 'eslint-plugin-prettier';

export default withNuxt().append({
  plugins: {
    prettier: prettierPlugin,
  },
  rules: {
    'no-console': 'warn',
    semi: ['error', 'always'],
    'vue/html-self-closing': 'off',
    'vue/component-tags-order': [
      'error',
      { order: ['script', 'template', 'style'] },
    ],
  },
});

when I run bun lint:fix I get this error:

Oops! Something went wrong! :(

ESLint: 9.36.0

TypeError: Key "rules": Key "vue/component-tags-order": Could not find "component-tags-order" in plugin "vue".

how to fix that?

[angelhdzmultimedia]

It's weird. I started today with eslint (never wanted it before, now i know why...👀) in Nuxt. Tried it once in pure Vue project.
Nuxt eslint module is installing eslint-plugin-vue and the rest of the plugins and deps correctly.

I'm also getting your error, and also don't get the v-model attribute in the template to be put at the top/front.

This is my eslint config:

// @ts-check
import { withNuxt as defineEslintConfig } from './.nuxt/eslint.config.mjs'
import prettierPlugin from 'eslint-plugin-prettier'

export default defineEslintConfig({
   plugins: {
    prettier: prettierPlugin,
  },
  rules: {
    'vue/component-tags-order': [
      'error',
      { order: ['script', 'template', 'style'] },
    ],
    'vue/attributes-order': [
      'error',
      {
        order: [
          // 1. Place TWO_WAY_BINDING (v-model) first
          'TWO_WAY_BINDING',

          // 2. Put the rest of the recommended Vue groups after
          'DEFINITION',
          'LIST_RENDERING',
          'CONDITIONALS',
          'RENDER_MODIFIERS',
          'GLOBAL',
          'UNIQUE',
          'OTHER_DIRECTIVES',
          'OTHER_ATTR',
          'EVENTS',
          'CONTENT',
        ],
        // You can also enable alphabetical sorting within these groups if desired
        alphabetical: false,
      },
    ],
  },
})

And don't have eslint.config.stylistic: true in nuxt.config.ts.

(I know v-model goes after other attributes, i will follow Vue conventions, but in Quasar, some components require v-model or throw an error, so to me, REQUIRED attributes need to be before all the other attributes.

Subscribing to this Issue for a solution.

[angelhdzmultimedia]

Update

Ooohhhhhhh

Edit:
Working for me now. I run eslint . --fix, and all the rules are applied. Had to add the 'SLOT' order after 'TWO_WAY_BINDING'. The v-model goes on top of the other attributes.
The <script> moves to top if I place it somewhere else.

Hope it works for you.

[Hetari]

thanks