fix(vue): fix nuxt page transition prevent bug

packages/nuxt/playground/app.vue

@@ -2,7 +2,33 @@
 </script>
 
 <template>
+  <header class="flex items-center">
+    <nuxt-link to="/">
+      Home
+    </nuxt-link>
+    <nuxt-link to="/about">
+      About
+    </nuxt-link>
+    <lui-popover text="popover">
+      <div class="popover-content">
+        <p>Lorem ipsum dolor sit.</p>
+        <p>Lorem ipsum dolor sit.</p>
+        <p>Lorem ipsum dolor sit.</p>
+        <p>Lorem ipsum dolor sit.</p>
+      </div>
+    </lui-popover>
+  </header>
   <div>
-    Nuxt module playground!
+    <NuxtPage />
   </div>
 </template>
+
+<style scoped>
+  .popover-content {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+</style>

packages/nuxt/playground/pages/about.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue'
+
+// Add this line
+
+// Your script setup code here
+const showModal = ref(false)
+const showSidebar = ref(false)
+</script>
+
+<template>
+  <div>
+    <p>about page</p>
+    <button @click="showModal = true">
+      Open Modal
+    </button>
+    <lui-modal :show="showModal" @close="showModal = false">
+      modal content
+    </lui-modal>
+    <LuiSidebar :show="showSidebar" position="right" @close="showSidebar = false">
+      <div>
+        <p>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
+        </p>
+      </div>
+    </LuiSidebar>
+  </div>
+</template>

packages/nuxt/playground/pages/index.vue

@@ -0,0 +1,9 @@
+<script setup>
+// Your script setup code here
+</script>
+
+<template>
+  <div>
+    home page
+  </div>
+</template>

packages/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lui-ui/lui-vue",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "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.",
   "author": "lui-ui",
   "license": "MIT",

packages/vue/src/components/Modal/LuiModal.vue

@@ -103,8 +103,8 @@ function handleOutsideClick(event: any) {
 </script>
 
 <template>
-  <Teleport :to="`#${teleportId}`">
-    <UseFocusTrap v-if="show" :options="{ immediate: true }">
+  <Teleport v-if="show" :to="`#${teleportId}`">
+    <UseFocusTrap :options="{ immediate: true }">
       <div
         class="lui-modal fixed inset-0 z-50 overflow-hidden"
         @keydown.esc="handleKeyDown"
@@ -122,7 +122,7 @@ function handleOutsideClick(event: any) {
           >
             <div v-if="showIcon" class="float-right leading-3 ml-2">
               <LuiButton variant="link" color="secondary" rounded @click="emit('close')">
-                <span class="sr-only">close modal</span>
+                <span class="sr-only">close modal testestests</span>
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                   <path
                     d="M12.0007 10.5862L16.9507 5.63623L18.3647 7.05023L13.4147 12.0002L18.3647 16.9502L16.9507 18.3642L12.0007 13.4142L7.05072 18.3642L5.63672 16.9502L10.5867 12.0002L5.63672 7.05023L7.05072 5.63623L12.0007 10.5862Z"

packages/vue/src/components/Sidebar/LuiSidebar.vue

@@ -112,7 +112,7 @@ const animationClasses = computed(() =>
 </script>
 
 <template>
-  <Teleport :to="`#${teleportId}`">
+  <Teleport v-if="show" :to="`#${teleportId}`">
     <transition
       enter-active-class="transition-all duration-200 ease-in"
       leave-active-class="transition-all duration-200 ease-out"
@@ -124,7 +124,7 @@ const animationClasses = computed(() =>
         @click="emit('close')"
         @keydown.esc="emit('close')"
       >
-        <UseFocusTrap v-if="show" :options="{ immediate: true }">
+        <UseFocusTrap :options="{ immediate: true }">
           <div class="fixed w-full top-0 bottom-0 max-h-full z-50 flex p-1.5" :class="positionClassesContainer">
             <section
               role="dialog"