[Nuxt] cannot find name ref in nuxt3 (feat. Auto-imports not working)

vue 말고 nuxt를 쓰면 좋은 점 중에 하나로 Auto-imports 기능이 있다.
이는 import를 해주지 않아도 vue의 다양한 요소를 바로 쓸 수 있는 기능이다.

자세하 내용은 https://nuxt.com/docs/guide/concepts/auto-imports 참고!

내가 만난 이슈는
새로운 .vue 파일을 생성하면
auto-imports가 잘 안 되는지 
cannot find name ref 라면서 빨간 줄이 그어진다.

최상단에

import {ref} from "vue";

를 입력해 수동 임포트를 해주면 되지만 
이건 오토임포트가 제대로 적용되면 필요없는 부분이다.

1번째 해결법은
Vue - Official (2023년 12월까지만 해도 Volar라고 불렷음) 플러그인을 리스타트, 리로드 해주는 방법이 있다.
(이 플러그인은 VSCode IDE에서 Vue 포맷을 받아들이게 해주는 플러그인이다)
https://marketplace.visualstudio.com/items?itemName=Vue.volar

Vue - Official - Visual Studio Marketplace

 

2번째 해결법은 tsconfig.json에 include 추가해주는 방법이 있다.

{
  "extends": "./.nuxt/tsconfig.json",
  "include": ["env.d.ts", ".nuxt/nuxt.d.ts", "**/*"]
}

(설정이 있음에도 안될때가있는데 tsconfig.json 가서 컨트롤 에스 해주면 바로 적용된다.)

끝.

참고
1. https://github.com/vuejs/language-tools/issues/1544