vue/no-reserved-props Correctness

What it does

Disallow reserved attribute names (e.g. key, ref) from being used as prop names.

Why is this bad?

Vue treats a number of attributes specially (key and ref in Vue 3; additionally is, slot, slot-scope, class and style in Vue 2). Declaring a prop with one of these names collides with the framework's own handling and breaks the component.

Examples

Examples of incorrect code for this rule:

vue

<script>
export default {
  props: {
    ref: String,
    key: String,
  },
};
</script>

Examples of correct code for this rule:

vue

<script>
export default {
  props: {
    foo: String,
  },
};
</script>

Configuration

vueVersion

type: integer

default: 3

Vue major version whose reserved attribute set is applied. Vue 2 reserves more names (is, slot, class, style, ...) than Vue 3.

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)Config (oxlint.config.ts)CLI

json

{
  "plugins": ["vue"],
  "rules": {
    "vue/no-reserved-props": "error"
  }
}

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["vue"],
  rules: {
    "vue/no-reserved-props": "error",
  },
});

bash

oxlint --deny vue/no-reserved-props --vue-plugin

Version

This rule was added in vnext.

What it does ​

Why is this bad? ​

Examples ​

Configuration ​

vueVersion ​

How to use ​

Version ​

References ​