# vue/no-restricted-custom-event

disallow specific custom event

💡 Some problems reported by this rule are manually fixable by editor suggestions (opens new window).

# 📖 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

← vue/no-restricted-component-options vue/no-restricted-html-elements →