# vue/no-restricted-custom-event

disallow specific custom event

# 📖 Rule Details

This rule allows you to specify custom event that you don't want to use in your application.

# 🔧 Options

This rule takes a list of strings, where each string is a custom event name or pattern to be restricted:

{
  "vue/no-restricted-custom-event": ["error", "input", "/^forbidden/"]
}
<template> <!-- ✗ BAD --> <input @input="$emit('input', $event.target.value)"> <!-- ✗ GOOD --> <input @input="$emit('update:value', $event.target.value)"> </template> <script> export default { methods: { handleChangeValue(newValue) { /* ✗ BAD */ this.$emit('input', newValue) this.$emit('forbiddenEvent') /* ✓ GOOD */ this.$emit('foo') this.$emit('bar') } } } </script>
Now loading...

Alternatively, the rule also accepts objects.

{
  "vue/no-restricted-custom-event": ["error",
    {
      "event": "input",
      "message": "If you intend a prop for v-model, it should be 'update:modelValue' in Vue 3.",
      "suggest": "update:modelValue"
    },
  ]
}

The following properties can be specified for the object.

  • event ... Specify the event name or pattern.
  • message ... Specify an optional custom message.
  • suggest ... Specify an optional name to suggest changes.
<template> <!-- ✗ BAD --> <input @input="$emit('input', $event.target.value)"> </template> <script> export default { methods: { handleChangeValue(newValue) { /* ✗ BAD */ this.$emit('input', newValue) } } } </script>
Now loading...

# 🚀 Version

This rule was introduced in eslint-plugin-vue v7.3.0

# 🔍 Implementation

Last Updated: 11/16/2021, 12:44:57 AM