Skip to content
Biome
Docs Enterprise Playground
Blog

useVueConsistentVOnHandlerStyle (JavaScript)

Language JavaScript (and super languages)

Summary

Section titled “Summary”

How to configure

Section titled “How to configure”
biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "useVueConsistentVOnHandlerStyle": "error"
      }
    }
  }
}

Description

Section titled “Description”

Enforce a consistent style for event handlers in Vue v-on directives.

Vue accepts three styles of event handler in v-on directives, also written as @:

  • A method handler is the name of a function, such as @click="save". Vue calls the function with the arguments of the event.
  • An inline handler is code that Vue runs when the event happens, such as @click="save()" or @click="count++". The code can read the first argument of the event as $event.
  • An inline function is a function written in the template, such as @click="() => save()". Vue calls it with the arguments of the event.

Mixing these styles makes templates harder to read. This rule reports event handlers that don’t use the configured style.

An inline handler or inline function that only calls a function by its name, and passes it the same arguments it receives, can be replaced by the name of that function. The fix for this is only offered when the function is declared in the methods option of the component with the same number of parameters, because otherwise Vue could pass the event to a parameter that the handler left empty.

Examples

Section titled “Examples”

Invalid

Section titled “Invalid”
<template>
  <button @click="save()">Save</button>
</template>
<template>
  <button @click="() => save()">Save</button>
</template>
<template>
  <button @click="count++">Add</button>
</template>

Valid

Section titled “Valid”
<template>
  <button @click="save">Save</button>
  <button v-for="item in items" @click="() => remove(item)">Remove</button>
</template>

Options

Section titled “Options”

style

Section titled “style”

Default: "methodOrInlineFunction"

The handler style to enforce.

  • "methodOrInlineFunction": use a method handler. Where a method handler can’t be used, such as when the handler passes a variable of v-for to a function, use an inline function.
  • "methodOrInline": use a method handler. Where a method handler can’t be used, use an inline handler.
  • "inlineFunction": use an inline function.
  • "inline": use an inline handler.

The rule doesn’t report handlers that call a method of an object by name, such as @click="form.submit".

"methodOrInline"

Section titled “"methodOrInline"”
biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "useVueConsistentVOnHandlerStyle": {
          "level": "on",
          "options": {
            "style": "methodOrInline"
          }
        }
      }
    }
  }
}
Invalid
Section titled “Invalid”
<template>
  <button v-for="item in items" @click="() => remove(item)">Remove</button>
</template>
Valid
Section titled “Valid”
<template>
  <button @click="save">Save</button>
  <button v-for="item in items" @click="remove(item)">Remove</button>
</template>

"inlineFunction"

Section titled “"inlineFunction"”
biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "useVueConsistentVOnHandlerStyle": {
          "level": "on",
          "options": {
            "style": "inlineFunction"
          }
        }
      }
    }
  }
}
Invalid
Section titled “Invalid”
<template>
  <button @click="save">Save</button>
</template>
<template>
  <button @click="save()">Save</button>
</template>
Valid
Section titled “Valid”
<template>
  <button @click="() => save()">Save</button>
  <button @click="() => count++">Add</button>
</template>

"inline"

Section titled “"inline"”
biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "useVueConsistentVOnHandlerStyle": {
          "level": "on",
          "options": {
            "style": "inline"
          }
        }
      }
    }
  }
}
Invalid
Section titled “Invalid”
<template>
  <button @click="save">Save</button>
</template>
<template>
  <button @click="() => save()">Save</button>
</template>
Valid
Section titled “Valid”
<template>
  <button @click="save()">Save</button>
  <button @click="save($event)">Save</button>
  <button @click="count++">Add</button>
</template>

See Also

Section titled “See Also”
Section titled “Related links”

Sponsored by

Copyright (c) 2023-present Biome Developers and Contributors.