Nuxt•4w ago

eslint end-tag-with-attributes

Hello 🙂 Pretty simple (I hope ^^") I installed eslint automatically this way, with stylistic without prettier : https://eslint.nuxt.com/packages/module So far so good 🙂 But then, this is considered an error : <MyComponent end>

Parsing error: end-tag-with-attributes. eslintvue/no-parsing-error

Parsing error: end-tag-with-attributes. eslintvue/no-parsing-error

How can I authorize specific attributes, or even better specific attributes for specific components ? I feel like it should be possible since those work fine :

<UModal prevent-close>

<div v-if="true"></div>
<div v-else></div>

<UModal prevent-close>

<div v-if="true"></div>
<div v-else></div>

Thanks 🙂

3 Replies

kapa.ai•4w ago

Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your question about authorizing specific attributes for components in ESLint with Nuxt, I'll need to provide some context and then suggest a potential solution. The error you're encountering is related to the Vue template parsing rules in ESLint. By default, Vue's template parser doesn't allow attributes on end tags, which is why you're seeing the error for <MyComponent end>. Unfortunately, the knowledge sources provided don't contain specific information about customizing this particular rule. However, we can explore a general approach to customizing ESLint rules in a Nuxt project using the @nuxt/eslint module. Here's a potential solution: 1. First, make sure you have the latest version of @nuxt/eslint installed. 2. In your eslint.config.mjs file, you can override the Vue-specific rules. Here's an example of how you might structure this:

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

export default withNuxt(
  // Custom configurations
).override('nuxt/vue', {
  rules: {
    'vue/no-parsing-error': ['error', {
      'end-tag-with-attributes': false
    }]
  }
})

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

export default withNuxt(
  // Custom configurations
).override('nuxt/vue', {
  rules: {
    'vue/no-parsing-error': ['error', {
      'end-tag-with-attributes': false
    }]
  }
})

This configuration disables the 'end-tag-with-attributes' check within the 'vue/no-parsing-error' rule. This should allow you to use attributes on end tags without triggering an error. Please note that this is a general solution and might not be the most ideal approach for all scenarios. It's always best to follow Vue's recommended practices when possible. For more detailed customization options and the latest information, I recommend checking the @nuxt/eslint module documentation (https://eslint.nuxt.com/packages/module) and the ESLint Vue plugin documentation (https://eslint.vuejs.org/rules/no-parsing-error.html). If this solution doesn't fully address your needs or if you need more specific customizations, you might need to consult more recent documentation or seek help from the Nuxt community forums. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•4w ago

Fully disabling that specifc rule sounds kind of the opposite of specifying it, since the goal what installing eslting in the first place ^^

Gaming

Programming

eslint end-tag-with-attributes