feat: use safe teleport dep

components/layout/navigation/Navbar.vue

@@ -67,7 +67,7 @@
         </div>
 
         <!-- Actions -->
-        <div
+        <TeleportTarget
           id="navbar-actions"
           class="absolute inset-y-0 right-0 flex flex-row-reverse items-center pr-2"
         >
@@ -84,7 +84,7 @@
               class="hover:hover-text-util h-6 w-6 text-base-content-highlight"
             />
           </button>
-        </div>
+        </TeleportTarget>
       </div>
     </div>
   </nav>

package.json

@@ -31,11 +31,13 @@
     "tailwindcss": "^3.3.2",
     "tippy.js": "^6.3.7",
     "vue-matomo": "^4.2.0",
+    "vue-safe-teleport": "^0.1.2",
     "vue-sonner": "^0.3.2",
     "vue-tippy": "^6.2.0",
     "vuetify": "^3.3.0"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.7",
     "autoprefixer": "^10.4.14",
     "jest": "^29.5.0",
     "postcss": "^8.4.23",

pages/posts.vue

@@ -134,7 +134,8 @@
 
 <template>
   <!-- Search -->
-  <teleport to="#navbar-actions">
+  <SafeTeleport to="#navbar-actions">
+    <!-- TODO: Add badge with tag/filter count -->
     <button
       class="focus-visible:focus-util hover:hover-bg-util rounded-lg px-2 py-1.5"
       type="button"
@@ -147,7 +148,7 @@
         class="hover:hover-text-util h-6 w-6 text-base-content-highlight"
       />
     </button>
-  </teleport>
+  </SafeTeleport>
 
   <!-- Search menu -->
   <SearchMenu