`vue/order-in-components` is not working with `defineNuxtComponent()`

[vedmant]

Checklist

• [x] I have tried restarting my IDE and the issue persists.
• [x] I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 8.28.0
• eslint-plugin-vue version: 9.8.0
• Node version: 16.18.1
• Operating System: MacOs 12.4 (21F79)

Please show your full configuration:

module.exports = {
  root: true,
  extends: ['@antfu', 'plugin:tailwindcss/recommended'],
  plugins: [
    'tailwindcss',
  ],
  rules: {
    'vue/component-tags-order': ['error', {
      order: ['template', 'script', 'style'],
    }],
    'camelcase': ['warn'],
    'import/newline-after-import': ['warn'],
    'no-unused-vars': ['warn'],
    'vue/no-unused-vars': ['warn'],
    'vue/new-line-between-multi-line-property': ['warn', { minLineOfMultilineProperty: 3 }],
    'tailwindcss/classnames-order': 'warn',
    'tailwindcss/no-custom-classname': 0,
    'tailwindcss/no-contradicting-classname': 'error',
    'vue/order-in-components': ['warn', {
      order: [
        'el',
        'name',
        'key',
        'parent',
        'functional',
        ['delimiters', 'comments'],
        ['components', 'directives', 'filters'],
        'extends',
        'mixins',
        ['provide', 'inject'],
        'ROUTER_GUARDS',
        'layout',
        'middleware',
        'validate',
        'scrollToTop',
        'transition',
        'loading',
        'inheritAttrs',
        'model',
        ['props', 'propsData'],
        'emits',
        'setup',
        'asyncData',
        'data',
        'fetch',
        'computed',
        'watch',
        'watchQuery',
        'LIFECYCLE_HOOKS',
        'methods',
        ['template', 'render'],
        'renderError',
        'head',
      ],
    }],
    '@typescript-eslint/space-before-function-paren': ['error', 'always'],
    '@typescript-eslint/brace-style': ['error', '1tbs', { allowSingleLine: true }],
    'vue/quote-props': ['error', 'as-needed'],
    'curly': ['error', 'all'],
    'no-sequences': 0,
    'max-statements-per-line': ['error', { max: 2 }],
  },
}

What did you do?

<script lang="ts">
import VueJsonPretty from 'vue-json-pretty'
import { mapState } from 'pinia'
import { defineNuxtComponent } from '#imports'
import 'vue-json-pretty/lib/styles.css'
import { useOrderStore } from '~/stores/order'
import { useAuthStore } from '~/stores/auth'

export default defineNuxtComponent({
  components: { VueJsonPretty },

  computed: {
    ...mapState(useAuthStore, ['user']),
    ...mapState(useOrderStore, { order: 'data' }),
  },

  data: () => ({
    tab: 'details',
    tabs: {
      details: {
        title: 'Details',
      },

      receipt: {
        title: 'Receipt',
      },
    },
  }),

  head () {
    return {
      title: 'Receipt',
    }
  },
})
</script>

What did you expect to happen?

It should show warning on line data: () => ({

It shows it if I replace defineNuxtComponent with defineComponent "ESLint: The "data" property should be above the "computed" property on line 22.(vue/order-in-components)"

What actually happened?

No warning.

Repository to reproduce this issue

Reproduction: https://stackblitz.com/edit/github-amdjq7?file=pages/should-warning-but-doesnt.vue run yarn lint in console

[ota-meshi]

What is defineNuxtComponent? Could you please explain? Also, please share a repository that can reproduce your issue.

[vedmant]

@ota-meshi defineNuxtComponent is a Nuxt 3 wrapper for defineComponent https://nuxt.com/docs/api/utils/define-nuxt-component#definenuxtcomponent, here is reproduction https://stackblitz.com/edit/github-amdjq7?file=pages/should-warning-but-doesnt.vue run yarn lint in console

[ota-meshi]

The documentation doesn't mention import { defineNuxtComponent } from '#imports'. What is it? Why can't you use defineComponent instead of defineNuxtComponent?

[vedmant]

@ota-meshi This import is optional, I prefer more explicit imports.

[Sapphire2k]

actually, the problem maybe caused by

...mapState(useAuthStore, ['user']),
...mapState(useOrderStore, { order: 'data' }),

removed it and fix will work fine