typescript - HeadlessUI/vue: TypeError vue.defineComponent är inte en funktion

Jag försöker installera @headlessui/vue i mitt nuxt-projekt.

När jag försöker använda det så här:

<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
    }
  },
....

Jag får ett typfel när jag kompilerar

TypeError
vue.defineComponent is not a function

Svar #1

Exakt samma fråga här: https://github.com/tailwindlabs/headlessui/issues/31

Det här biblioteket är skapat för Vue 3. Jag är inte säker på att NuxtJS använder Vue 3, jag tror att de använder Vue 2. Kan du verifiera detta?

Ja, Nuxt har inte släppt en version på Vue 3 än, men såvitt jag förstår kommer en beta i den närmaste framtiden 👍🏻

Relaterade artiklar