Vue.js 2 Design Patterns and Best Practices

Scoped styles

Great! What happens if we add another button element? As we styled the button element directly with CSS:

<template>  <div>    <fancy-button></fancy-button>    <button>I'm another button!</button>  </div></template>

If we head over to our browser we can see each of the buttons that we have created:

Uh oh! This other button isn't a fancy-button, so why is it getting the styles? Thankfully, stopping the styles from leaking outside of the component is simple, all we need to do is add the scoped attribute to the style tag:

<style scoped> button { border: 1px solid black; padding: 10px; }</style>

The scoped attribute isn't part of Vue by default, ...