pageClass | sidebarDepth | title | description | since |
---|---|---|---|---|
rule-details |
0 |
vue/no-restricted-component-options |
disallow specific component option |
v7.0.0 |
disallow specific component option
This rule allows you to specify component options that you don't want to use in your application.
This rule takes a list of strings, where each string is a component option name or pattern to be restricted:
{
"vue/no-restricted-component-options": ["error", "init", "beforeCompile", "compiled", "activate", "ready", "/^(?:at|de)tached$/"]
}
<script>
export default {
/* ✗ BAD */
init: function () {},
beforeCompile: function () {},
compiled: function () {},
activate: function () {},
ready: function () {},
attached: function () {},
detached: function () {},
/* ✓ GOOD */
beforeCreate: function () {},
activated: function () {},
mounted: function () {},
}
</script>
Also, you can use an array to specify the path of object properties.
e.g. [ "error", ["props", "/.*/", "twoWay"] ]
<script>
export default {
props: {
size: Number,
name: {
type: String,
required: true,
/* ✗ BAD */
twoWay: true
}
}
}
</script>
You can use "*"
to match all properties, including computed keys.
e.g. [ "error", ["props", "*", "twoWay"] ]
<script>
export default {
props: {
[foo + bar]: {
type: String,
required: true,
/* ✗ BAD */
twoWay: true
}
}
}
</script>
Alternatively, the rule also accepts objects.
{
"vue/no-restricted-component-options": ["error",
{
"name": "init",
"message": "Use \"beforeCreate\" instead."
},
{
"name": "/^(?:at|de)tached$/",
"message": "\"attached\" and \"detached\" is deprecated."
},
{
"name": ["props", "/.*/", "twoWay"],
"message": "\"props.*.twoWay\" cannot be used."
}
]
}
The following properties can be specified for the object.
name
... Specify the component option name or pattern, or the path by its array.message
... Specify an optional custom message.
This rule was introduced in eslint-plugin-vue v7.0.0