Zenn
😀

Nuxt3 で Reactivity Transform を使う

2022/03/29に公開
Nuxt 3
tech

まだ、公式ドキュメントに記載されていないのでメモ書き程度に

Reativity Transform が何ぞや！という方は以下の jay-es さんの記事を読まれると良いかと
Vue.js は Reactivity Transform でさらに進化する

使い方

nuxt.config.ts に experimental の reactivityTransform を有効にする設定を追加します。

nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    experimental: {
        reactivityTransform: true
    }
})

追加後すぐに、$ref などの記述を行うと 名前 '$ref' が見つかりません。 と以下画像の様に怒られます。

それを回避する為に typecheck を実行します。

npx nuxi typecheck

お疲れ様です！これで Reactivity Transform を使用する設定は完了です！

使用例

app.vue
<script setup lang="ts">
let count = $ref<number>(0);

function inc() {
  count++;
}
function dec() {
  count--;
}
</script>

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="inc">inc</button>
    <button @click="dec">dec</button>
  </div>
</template>

以下の様に問題なく変数に インクリメント、デクリメント が出来ました。

参考

feat: support reactivity transform #3737

Discussion