enforce-style-attribute.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/enforce-style-attribute	enforce either the `scoped` or `module` attribute in SFC top level style tags

vue/enforce-style-attribute

enfore either the scoped or module attribute in SFC top level style tags

• ❗ This rule has not been released yet.

🔧 Options

{
  "vue/attribute-hyphenation": ["error", "either" | "scoped" |  "module"]
}

📖 Rule Details

This rule warns you about top level style tags that are missing either the scoped or module attribute.

• "either" (default) ... Warn if a style tag doesn't have neither scoped nor module attributes.
• "scoped" ... Warn if a style tag doesn't have the scoped attribute.
• "module" ... Warn if a style tag doesn't have the module attribute.

"either"

<!-- ✓ GOOD -->
<style scoped></style>
<style lang="scss" src="../path/to/style.scss" scoped></style>

<!-- ✓ GOOD -->
<style module></style>

<!-- ✗ BAD -->
<style></style>

"scoped"

<!-- ✓ GOOD -->
<style scoped></style>
<style lang="scss" src="../path/to/style.scss" scoped></style>

<!-- ✗ BAD -->
<style></style>
<style module></style>

"module"

<!-- ✓ GOOD -->
<style module></style>

<!-- ✗ BAD -->
<style></style>
<style scoped></style>
<style lang="scss" src="../path/to/style.scss" scoped></style>

🔍 Implementation

• Rule source
• Test source