# vue/no-restricted-props

disallow specific props

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

# 📖 Rule Details

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

# 🔧 Options

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

{
  "vue/no-restricted-props": ["error", "value", "/^forbidden/"]
}

<script>
export default {
  props: {
    /* ✗ BAD */
    value: String,
    forbiddenNum: Number,

    /* ✓ GOOD */
    foo: {},
    bar: {},
    arrowedBool: Boolean,
  }
}
</script>

Now loading...

<script>
export default {
  props: [
    /* ✗ BAD */
    'value',
    'forbiddenNum',

    /* ✓ GOOD */
    'foo',
    'bar',
    'arrowedBool',
  ]
}
</script>

Now loading...

Alternatively, the rule also accepts objects.

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

The following properties can be specified for the object.

name ... Specify the prop name or pattern.
message ... Specify an optional custom message.
suggest ... Specify an optional name to suggest changes.

<script>
export default {
  props: [
    /* ✗ BAD */
    'value',
  ]
}
</script>

Now loading...

# 🚀 Version

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

# 🔍 Implementation

← vue/no-restricted-html-elements vue/no-restricted-static-attribute →