no-restricted-custom-event.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/no-restricted-custom-event	disallow specific custom event

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>

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>

🔍 Implementation

• Rule source
• Test source