Styling

Vue envs support multiple ways to style your components.

You can use CSS to style your components. Just use the style tag in your .vue files to add your CSS code.

<template>
  ...
</template>

<style>
/* your CSS code here */
</style>
Copied

Use the style tag with a lang="scss" attribute in your .vue files to add your SCSS code.

<template>
  ...
</template>

<style lang="scss">
/* your SCSS code here */
</style>
Copied

Learn more about SCSS.

Use the style tag with a lang="sass" attribute in your .vue files to add your Sass code.

<template>
  ...
</template>

<style lang="sass">
/* your Sass code here */
</style>
Copied

Learn more about Sass.

Use the style tag with a lang="less" attribute in your .vue files to add your Less code.

<template>
  ...
</template>

<style lang="less">
/* your Less code here */
</style>
Copied

Learn more about Less.

You can use the scoped attribute in your style tag to scope your CSS to the current component.

<template>
  <div class="example">hi</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>
Copied

Learn more about scoped CSS.

You can use the module attribute in your style tag to enable CSS modules for your component.

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>
Copied

Learn more about CSS modules.