【<script setup>対応版】Nuxt3で効率的にスタイルを書く

こんにちは。エキサイト株式会社で24卒デザイナー内定者アルバイトをしている、齋藤です。
先日、「Nuxt3で効率的にスタイルを書く」と題して、TSで定義した変数を<style>で参照する方法をご紹介しました。が・・・。
Vue3.2以降では<script>の構文が変更となり、同じComposition APIでも<script setup>構文を使用することができるようです。今回は、Vue3.2以降の最新版でTSで定義した変数を<style>で参照する方法をご紹介します。

そもそも`<script setup>`って何？

Vueの公式ドキュメントでは以下のように紹介されています。

<script setup> は単一ファイルコンポーネント（SFC）内で Composition API を使用するコンパイル時のシンタックスシュガー（糖衣構文）です。SFC と Composition API の両方を使うならば、おすすめの構文です。これは通常の<script>構文よりも、多くの利点があります

また、使用する利点として、

ボイラープレートが少なくて、より簡潔なコード
純粋な TypeScript を使ってプロパティと発行されたイベントを宣言する機能
実行時のパフォーマンスの向上（テンプレートは中間プロキシなしに同じスコープ内のレンダー関数にコンパイルされます）
IDE で型推論のパフォーマンス向上（言語サーバーがコードから型を抽出する作業が減ります）

などが挙げられています。

ja.vuejs.org

実際にやってみる

TSにスタイル用の変数を定義する

前回と同様に/assetsの配下にVariants.tsを作成して定義していきます。

export const Color = {
    PrimaryBlack: '#000000',
}

export const Typography = {
    BodyText: '14px',
}
...

使用するVueコンポーネントにimportする

ここからが前回と異なります。同じComposition APIですが、<script setup>を使用して書きます。

<script setup lang = "ts">
import { Color, Typography } from '~~/assets/Variants';

const style = { Color, Typography };
</script>

たったこれだけです。単純な<script>と比べて行数が1 / 3に減りました。

スタイルにあてる

<style scoped>
    p {
        color: v-bind('style.Color.PrimaryBlack')
        font-size: v-bind('style.Typography.BodyText')
    }
</style>

v-bindを使用することで変数を参照することが出来ます。VS Codeでは補完もしてくれるので、効率的にスタイリングをすることが可能です。

さいごに

今回は続編としてVue3.2以降の<script setup>を使用して、TSで定義した変数を<style>で参照をし効率的にスタイルを書く方法をご紹介しました。

そもそも<script setup>って何？