HeadlessUI/vue: TypeError vue.defineComponent is not a function

Question

I try to install @headlessui/vue in my nuxt project.

When I try to use it like:

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

I get a type error while compiling

TypeError
vue.defineComponent is not a function

Answer 1

Exactly the same question here: https://github.com/tailwindlabs/headlessui/issues/31

This library is created for Vue 3. I am not sure that NuxtJS is using Vue 3, I think they are using Vue 2. Can you verify this?

Yep Nuxt hasn’t released a version on Vue 3 yet but as far as I understand a beta is coming in the near future 👍🏻