[Vue][popover] Don't work on Nuxt and portalled is set to true by default

[Theo-Rige]

🐛 Bug report

In using Nuxt 3 and the popover seems to be portalled by default, contrary to what is stated in the documentation, and it doesn't work with the Vue 3 SFC example and portalled option explicitly set to false.

💥 Steps to reproduce

1. Create a Nuxt 3 app
2. Create a Popover.client.vue component by copy pasting the Vue SFC example from the doc
3. Render it in app.vue
4. See the popover component doesn't works

💻 Link to reproduction

CodeSandbox reproduction:

🧐 Expected behavior

The api.portalled be false by default and the popover works.

🌍 System information

Software	Version(s)
Zag Version	0.48.0
Browser	Edge 124.0.2478.67
Operating System	Windows

📝 Additional information

[segunadebayo]

Hi @Theo-Rige,

This is largely a documentation problem. Here's the snippet that should work:

<script setup>
  import * as popover from "@zag-js/popover"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed, Teleport, Fragment } from "vue"

  const [state, send] = useMachine(popover.machine({ id: "1" }))
  const api = computed(() => popover.connect(state.value, send, normalizeProps))
</script>

<template>
  <div ref="ref">
    <button v-bind="api.triggerProps">Click me</button>
    <Teleport to="body" :disabled="!api.portalled">
      <div v-bind="api.positionerProps">
        <div v-bind="api.contentProps">
          <div v-bind="api.titleProps">Presenters</div>
          <div v-bind="api.descriptionProps">Description</div>
          <button>Action Button</button>
          <button v-bind="api.closeTriggerProps">X</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>