eslint-plugin-vue

Appearance

vue/enforce-style-attribute ​

enforce or forbid the use of the scoped and module attributes in SFC top level style tags

📖 Rule Details ​

This rule allows you to explicitly allow the use of the scoped and module attributes on your top level style tags.

"scoped" ​

<!-- ✓ GOOD --> <style scoped></style> <style lang="scss" src="../path/to/style.scss" scoped></style> <!-- ✗ BAD --> <style module></style> <!-- ✗ BAD --> <style></style>
Now loading...

"module" ​

<!-- ✓ GOOD --> <style module></style> <!-- ✗ BAD --> <style scoped></style> <!-- ✗ BAD --> <style></style>
Now loading...

"plain" ​

<!-- ✓ GOOD --> <style></style> <!-- ✗ BAD --> <style scoped></style> <!-- ✗ BAD --> <style module></style>
Now loading...

🔧 Options ​

json
{
  "vue/enforce-style-attribute": [
    "error",
    { "allow": ["scoped", "module", "plain"] }
  ]
}
  • "allow" (["scoped" | "module" | "plain"]) Array of attributes to allow on a top level style tag. The option plain is used to allow style tags that have neither the scoped nor module attributes. Default: ["scoped"]

🚀 Version ​

This rule was introduced in eslint-plugin-vue v9.20.0

🔍 Implementation ​