@lui-ui/lui-vue/dist/composables/useTeleport.mjs

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import { computed } from "vue";
import { isClient } from "../utils/isClient.mjs";
import { useId } from "../utils/useId.mjs";
const wrapperId = "lui-teleport-wrapper";
function createWrapper() {
  const body = document.getElementsByTagName("body");
  const teleportWrapper = document.createElement("div");
  teleportWrapper.setAttribute("id", wrapperId);
  body[0].appendChild(teleportWrapper);
  return teleportWrapper;
}
function createElement(name) {
  const id = `lui-teleport-${name}-${useId()}`;
  const teleportElement = document.createElement("div");
  teleportElement.setAttribute("id", id);
  return teleportElement;
}
export function useTeleport(name) {
  const teleportTarget = computed(() => {
    if (!isClient())
      return void 0;
    const wrapper = document.getElementById("lui-teleport-wrapper") || createWrapper();
    const targetElement = createElement(name);
    wrapper.appendChild(targetElement);
    return targetElement;
  });
  return { teleportTarget };
}