I have a Nuxt 3 app that uses the new Nuxt ESLint module for linting and formatting (using ESLint Stylistic). The relevant bit of my ESLint config looks like this:

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

export default withNuxt({
  rules: {
    '@stylistic/comma-dangle': ['error', 'never'],
    // 'vue/comma-dangle': ['error', 'never']
  }
})

In this file I’m setting a value for @stylistic/comma-dangle, but a rule called vue/comma-dangle also exists. The Vue ESLint docs describe this rule as extends the rule that @stylistic/eslint-plugin has and in the source code it’s just defined as a wrapper arround the other rule. Now consider this Vue component:

<template>
  <div
    :class="{
      test: true,
      test2: false, // There is a trailling comma here.
    }"
  />
</template>

<script setup lang="ts">
({
  test: true,
  test2: false, // There is a trailling comma here as well.

})
</script>

The comma in the <script> gets correctly flagged as incorrect, but the comma in the <template> doesn’t unless I also specify the vue/comma-dangle rule in the ESLint config. I would expect that, since the Vue rule extends the other rule it would inherit the configured value (['error', 'never']) in some way. I can’t find anything online related to what it means to extend a rule so I’m thinking I’m misunderstanding the docs. The Vue docs seem to be implying that a relation between the two rules and their values exists, but this might be due to unfortunate wording so my question boils down to this:

• Do I need to set both rules to get consistent lint behavior between the <script> and <template>?
• Is there some kind of value inheritance / rule extension mechanism in place between these rules or is this just a bad choice of words?
• If such a mechanism exists, why is it not working in my case?