Vue 3は、2年間の作業に続く大規模なリリースとして、昨年9月に出荷された。 Vue開発者は、どのようにコンポーネントの状態がコンポーネントのスタイルに関連するかを単一ファイルのコンポーネントテンプレートで宣言的に記述することができるようになった。実験的な機能はCSS変数に依存するものである。これは、フレームワークに依存しない設計システムを実装するために使用されてきた、最新のブラウザのネイティブ機能である。
Vueの単一ファイルコンポーネントの<style>タグは、テンプレートの<script>セクションで宣言されたコンポーネント状態の一部にバインドできるvars属性をサポートするようになった。sfc-style-variables RFCは、次の基本的な例のように使うことができる。
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>
<style vars="{ color }">
.text {
color: var(--color);
}
</style>
この簡単な例では、コンポーネントの状態に属するcolorプロパティは最初はredに設定されている。そのプロパティは、コンポーネントのdivコンテンツのテキストカラーとして使用されるstyleタグにバインドされている。バインディングとは、コンポーネントのcolorの状態の変化がテキストの色に自動的に反映されることを意味する。
CSS変数を必要としない1つの代替方法は、静的CSSクラスでcolorコンポーネントの状態とdivスタイルの間の関係をエンコードすることである。スタイルの変更が、有限で適度に少ない数であることが事前にわかっている場合、この手法は適切である可能性がある。CSS変数を活用する2番目の方法は、テンプレートのルートレベルでCSS変数の宣言をインライン化することである。CSS変数の値は、宣言の時点でバインドできる。どちらの方法も、テンプレートベースのフレームワークで使用できる。Svelteコミュニティは、これがどのように機能するかについての詳細な例を提供している。
ただし、Vue 3の新しい構文により、間違いなく、単一ファイルのコンポーネントテンプレートに一定レベルの宣言性と読みやすさの向上を得ることができる。Vue 3は、<style scoped vars>、<style vars>、または単に<style scoped>（Vue 2互換の構文）が使用されているかどうかに応じて、関連するスコープルールを自動的に実装する。
CSS変数は、最新のブラウザでネイティブにサポートされており、動的なスタイルを表現するための多目的なツールである。Scott Tolinski氏は、ReactiveConfでの自身の講演なぜ、CSSフレームワークを使用しないかで、どのようにして、IE11をサポートする必要のない開発者がCSS変数を活用し、CSSフレームワークよりも特徴的に少ないオーバーヘッドでカスタムデザインシステムを実装するかについて説明した。Facebookエンジニアリングチームは、Facebook.com Webサイトの最近の再設計で、どのようにCSS変数を使ってダークモードを実装するかについて説明した。
新しいVue 3 <style>構文では、重大な変更はない。しかし、開発者は、現在のブラウザサポートがターゲットオーディエンスと一致するかどうかを確認する必要がある。CSS変数はIE11でポリフィルされる場合がある一方で、機能観点とパフォーマンス観点から注意事項として記載される可能性がある。SalesforceのLightning Webコンポーネント（LWC）チームは、パフォーマンス上の理由から、独自のIE11ポリフィルを実装していると報告した。
Vueは、シングルページアプリケーションなどのユーザーインターフェイスを構築するための進歩的なフレームワークである。Vue.jsは、MITオープンソースライセンスの下で利用できる。Vue.js GitHubパッケージを介してのコントリビューションを歓迎している。その場合、Vue.js投稿ガイドラインに従う必要がある。