[[unplugin-vue2-script-setup]]を使って、[[Nuxt2]]のプロジェクトに[[script setup]]を導入する。
## インストール
```bash
# v0.11.0
npm i -D unplugin-vue2-script-setup
# v1.6.2
npm i @vue/composition-api
```
[[Nuxt2]]のプラグインとして以下を登録。
```ts
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
## [[IntelliJ IDEA]]を使う
そのままでは[[script setup]]は正しく認識されない。[[tsconfig.json]]に以下を登録する。
```json
{
"compilerOptions": {
"types": [
"unplugin-vue2-script-setup/types"
]
}
}
```
## 型エラーを防ぐ
[[nuxt.config]]で型チェックを無効化する。
```ts
buildModules: [
['@nuxt/typescript-build', { typeCheck: false }],
],
```
代わりに[[vue-tsc]]を使う。
```console
vue-tsc --noEmit && nuxt build
```
## 実行時エラー
`withDefaults`のところでエラー。
```
Uncaught ReferenceError: withDefaults is not defined
at ./node_modules/babel-loader/lib/index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./components/explorer/SvnLogTable.vue?vue&type=script&setup=true&lang=ts& (index.js:20:15)
at __webpack_require__ (bootstrap:853:1)
```
[[IntelliJ IDEA]]ではエラーになっていないが明示的にimportしたら解決。
```html
<script setup lang="ts">
import { withDefaults, defineProps, defineEmits, computed } from '@vue/runtime-core';
</script>
```
次は`render`がダメ..
> Cannot set properties of undefined (setting'render')
https://github.com/antfu/unplugin-vue2-script-setup/issues/49#issuecomment-957304450
```
$ npm ls thread-loader
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
`--
[email protected]
`-- @nuxt/
[email protected]
`--
[email protected]
```
==これ以上はきつそう...==
[[Nuxt Composition API]]も[[script setup]]対応していそうなため、そちらを試す。
↓
https://github.com/nuxt-community/composition-api/issues/624 に阻まれて無理だった。。[[Nuxt Bridge]]への移行を検討した方が早そう..。