headlessui/vue error

Olá Dev’s, estou usando o nuxt 3 + tailwind e usei o headlessui para usar alguns componentes e me deparei com o seguinte erro ao compilar.

Error provide() can only be used inside setup()
Error inject() can only be used inside setup() or functional components

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^12.0.0",
    "@nuxtjs/google-fonts": "^3.0.0-1",
    "@nuxtjs/tailwindcss": "^6.1.3",
    "eslint": "^8.26.0",
    "nuxt": "3.0.0",
    "sass": "^1.56.1",
    "vue-eslint-parser": "^9.1.0"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.4"
  }
}

Esse erro acontece porque o headlessui não foi mimificado pelo nuxt e então não consegue ver as instruções do modulo:

Para resolver isso basta ir no arquivo do nuxt.config.js / ts e adicionar a seguinte configuração:

export default defineNuxtConfig({
  build: {
    transpile: ['@headlessui/vue']
  }
...
}

Isso fará que o nuxt transpile o headlessui e consiga usar os imports de provide() e inject()!