Global Styles

Checks if the component is using global styles instead of scoped styles.   
👉 https://vuejs.org/style-guide/rules-essential.html#use-component-scoped-styling

❓ Why it's good to follow this rule?

• Maintainability limiting the css for the actual component makes it easier to maintain and understand.
• Isolation the component is isolated and has no unwanted effect on the other parts of the application.
• Reusability the component can be reused in other parts of the application with exactly the same look and feel.

😱 Examples of code for which this rule will throw a warning

WARNING

The following code contains global styles, which may affect other components unintentionally.

<template>
  <h3>Hello World</h3>
</template>

<style>
h3 {
  background: pink;
}
</style>

🤩 How to fix it?

TIP

Refactor the code to use scoped styles by adding the scoped attribute to the <style> block.

<template>
  <h3>Hello World</h3>
</template>

<style scoped>
h3 {
  background: pink;
}
</style>