Nuxt3에서 Reactivity Transform 사용

아직 정식 문서에 기재되지 않았기 때문에 노트만 쓴다
Reativity Transform이란!이런 분들은 다음jay-es의 글을 읽어주실 수 있나요?
Vue.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