typescript - HeadlessUI/vue: TypeError vue.defineComponent er ikke en funksjon

Jeg prøver å installere @headlessui/vue i mitt nuxt-prosjekt.

Når jeg prøver å bruke det slik:

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

Jeg får en typefeil under kompilering

TypeError
vue.defineComponent is not a function

Svar #1

Helt samme spørsmål her: https://github.com/tailwindlabs/headlessui/issues/31

Dette biblioteket er laget for Vue 3. Jeg er ikke sikker på om NuxtJS bruker Vue 3, jeg tror de bruker Vue 2. Kan du bekrefte dette?

Ja, Nuxt har ikke lansert en versjon på Vue 3 ennå, men så vidt jeg forstår kommer en beta i nær fremtid 👍🏻

Relaterte artikler