Question

使用npx create-nuxt-app创建了nuxt应用。已按照https://typescript.nuxtjs.org的文档进行操作，但是我在使用@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>

不起作用，并引发错误“属性或方法“ msg”未在实例上定义，但在渲染期间被引用”。因为看不到我的ref。我在“ plugins / composition-api.ts”中添加了Composition API作为插件：

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

Vue.use(VueCompositionApi)

然后在nuxt.config.ts中输入

：

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

Answer 1

我很糟糕，忘记了nuxt中的TS运行时：

npm i -S @nuxt/typescript-runtime

然后您需要更新package.json：https://typescript.nuxtjs.org/guide/runtime.html#installation

composition api不适用于Nuxt-TS

1 个答案: