Trying to incorporate @headlessui/vue into my nuxt project has been a challenge.
My attempt at using it looks like this:
<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
}
},
....
This setup leads to a type error during compilation:
TypeError
vue.defineComponent is not a function