时间戳

首页 > 解决方案 > HeadlessUI/vue：TypeError vue.defineComponent 不是函数

typescript - HeadlessUI/vue：TypeError vue.defineComponent 不是函数

问题描述

我尝试安装@headlessui/vue在我的nuxt项目中。

当我尝试像这样使用它时：

<template>
  <Menu>
    <MenuItems>
      <MenuItem>Item</MenuItem>
    </MenuItems>
  </Menu>
</template>

<script lang="ts">
import Vue from 'vue'
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'

export default Vue.extend({
  components: { Menu, MenuButton, MenuItems, MenuItem },
  data () {
    return {
      isScrolling: false
    }
  },
....

编译时出现类型错误

TypeError
vue.defineComponent is not a function

标签： typescriptvuejs2nuxt.jstailwind-css

解决方案

这里完全相同的问题：https ://github.com/tailwindlabs/headlessui/issues/31

这个库是为 Vue 3 创建的。我不确定 NuxtJS 使用的是 Vue 3，我认为他们使用的是 Vue 2。你能验证一下吗？

是的，Nuxt 还没有在 Vue 3 上发布版本，但据我了解，beta 版将在不久的将来推出

推荐阅读