组合 API 不适用于 Nuxt-TS

Question

Created nuxt app using npx create-nuxt-app . Followed documentation at https://typescript.nuxtjs.org , however i have an issue using @vue/composition-api :

example component.vue:

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script lang="ts">
import { createComponent, ref } from '@vue/composition-api'

export default createComponent({
  setup() {
    const msg = ref('hello')

    return {
      msg
    }
  }
})
</script>

Doesn't work, throws an error "Property or method "msg" is not defined on the instance but referenced during render." because it doesn't see my ref . I've added composition API as plugin in "plugins/composition-api.ts":

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

Then in nuxt.config.ts:

plugins: ['@/plugins/composition-api']

Answer 1

My bad, forgot about TS-runtime in nuxt:

npm i -S @nuxt/typescript-runtime

Then you need to update package.json: https://typescript.nuxtjs.org/guide/runtime.html#installation