Vue – How To Style Vuetify Elements

How to style Vuetify Elements inside a component?

We can use the Style Tag to add css styling directly to a Vue component. This will go at the top of the file and will need to include the “scoped” tag.

We can learn more here – https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

<style scoped>
.v-btn {
  color: red;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>

The item we are styling will also need to include the “Scope” tag:

<v-btn prepend-icon="mdi-finance" variant="outlined" scoped>Get Started</v-btn>

We can also use the “::v-deep” selector to target child elements In Sass, we can also use the “>>>” or “/deep/” selectors for generic css styles.

<style scoped>
.a::v-deep .b {
 /* ... */ 
}
</style>

/* Becomes When Rendered*/

<style scoped>
.a /deep/ .b {
 /* ... */ 
}
</style>

How to style Vuetify Elements globaly?

We can use the Style Tag to add css styling directly to a Vue component. This will go at the top of the file and will need to include the “scoped” tag.

<style scoped>
.v-btn {
  color: red;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>

The item we are styling will also need to include the “Scope” tag:

<v-btn prepend-icon="mdi-finance" variant="outlined" scoped>Get Started</v-btn>