Vue 3 Experiments with Native CSS Variables Template Integration

Vue developers can now declaratively describe in single-file component templates how component state relates to component style. The experimental Vue 3 feature relies on CSS variables, a native feature in modern browsers, that has been used to implement framework-independent design systems.

The <style> tag in Vue’s single-file component now supports a vars attribute that may bind to pieces of component state declared in the <script> section of the template. The sfc-style-variables RFC provides the following basic example:

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

In this trivial example, the color property that belongs to the component state is initially set to red. That property is bound in the style tag to be used as the text color of the component’s div content. The binding means that changes in the component’s color piece of state will be automatically reflected in the text color.

One alternative that does not require CSS variables would be to encode the relation between the color component state and the div styling in static CSS classes. The technique may be relevant if the style changes fall into a finite and reasonably small set of values that are known ahead of time. A second alternative that does leverage CSS variables is to inline the declaration of the CSS variables at the template’s root level. The CSS variable’s value can then be bound at the point of declaration. Both alternatives can be used in any template-based framework. The Svelte community provided detailed examples of how this would work.

Vue 3’s new syntax, however, arguably adds a level of declarativeness and readability to single-file component templates. Vue 3 takes care of implementing the relevant scope rules automatically, according to whether <style scoped vars>, <style vars>, or simply <style scoped> (Vue 2-compatible syntax) is used.

CSS variables are natively supported by modern browsers and are a versatile tool to express dynamic styling. Scott Tolinski explained in his Why We Don’t Use a CSS Framework talk at ReactiveConf how developers who do not need to support IE11 can leverage CSS variables and implement a custom design system with characteristically less overhead than a CSS framework. The Facebook engineering team described how they used CSS variables to implement dark mode in the recent redesign of the facebook.com website.

The new Vue 3 <style> syntax does not introduce breaking changes. However, developers should check whether the current browser support matches their target audience. While CSS variables may be polyfilled on IE11, caveats may apply feature- and performance-wise. The Lightning Web Components (LWC) team at Salesforce reported implementing their own IE11 polyfill for performance reasons.

Vue is a progressive framework for building user interfaces, including single-page applications. Vue.js is available under the MIT open-source license. Contributions are welcome via the Vue.js GitHub package and should follow the Vue.js contribution guidelines.