The Single File Component Styles RFC gives us Vue developers a way to use a component’s reactive data as CSS variables.
In just one simple syntax, we can update styles at runtime in Vue 3.
This proposed change takes full advantage of CSS variables, which most modern browsers support, and Vue 3’s reactivity library. Combining the two gives us an easy way to update our styles using our component’s data.
In this guide, we’ll take a look at how we can use these SFC styles, how it works under the hood, and then some advanced knowledge from the RFC.
Ready? Me too. Let’s hop right in.
How can we use SFC Styles?
To keep it short, there are just two steps we need to use this feature:
- Declare reactive data inside our component’s script
- Access them in our CSS using v-bind
Let’s take a look at an example where we bind the color of a paragraph to component data.
