refactor: remove debounce and page transitions

Author: MatteoGabriele

app/pages/index.vue

@@ -1,27 +1,20 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
 import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
 const searchQuery = shallowRef('')
-const searchInputRef = useTemplateRef('searchInputRef')
-const { focused: isSearchFocused } = useFocus(searchInputRef)
 
 async function search() {
-  const query = searchQuery.value.trim()
-  if (!query) return
-  await navigateTo({
-    path: '/search',
-    query: query ? { q: query } : undefined,
-  })
-  const newQuery = searchQuery.value.trim()
-  if (newQuery !== query) {
-    await search()
+  if (!searchQuery.value) {
+    return
   }
-}
 
-const handleInput = isTouchDevice()
-  ? search
-  : debounce(search, 250, { leading: true, trailing: true })
+  navigateTo({
+    name: 'search',
+    query: {
+      q: searchQuery.value,
+    },
+  })
+}
 
 useSeoMeta({
   title: () => $t('seo.home.title'),
@@ -66,12 +59,12 @@ defineOgImageComponent('Default', {
           class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.2s"
         >
-          <form method="GET" action="/search" class="relative" @submit.prevent.trim="search">
+          <form method="GET" action="/search" class="relative" @submit.prevent="search">
             <label for="home-search" class="sr-only">
               {{ $t('search.label') }}
             </label>
 
-            <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
+            <div class="relative group">
               <div
                 class="absolute -inset-px rounded-lg bg-gradient-to-r from-fg/0 via-fg/5 to-fg/0 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100"
               />
@@ -85,15 +78,13 @@ defineOgImageComponent('Default', {
 
                 <input
                   id="home-search"
-                  ref="searchInputRef"
-                  v-model="searchQuery"
+                  v-model.trim="searchQuery"
                   type="search"
                   name="q"
                   autofocus
                   :placeholder="$t('search.placeholder')"
                   v-bind="noCorrect"
                   class="w-full bg-bg-subtle border border-border rounded-xl ps-8 pe-24 h-14 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 motion-reduce:transition-none hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
-                  @input="handleInput"
                 />
 
                 <button

nuxt.config.ts

@@ -133,7 +133,6 @@ export default defineNuxtConfig({
   experimental: {
     entryImportMap: false,
     viteEnvironmentApi: true,
-    viewTransition: true,
     typedPages: true,
   },