diff --git a/components/i/SearchHistory.vue b/components/i/SearchHistory.vue
index b0d7aae6a5794c3892ef3c07138d2a31e428cbec..9f4b4bb7125cb3f74a328fc9afdd7c1990908c03 100644
--- a/components/i/SearchHistory.vue
+++ b/components/i/SearchHistory.vue
@@ -37,7 +37,6 @@
     </div>
 </template>
 <script setup>
-import { vAutoAnimate } from '@formkit/auto-animate'
 const emits = defineEmits(['sign', 'clear'])
 const Layout = inject('Layout')
 const modal = useModal()
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d54dfcc318fd5b994ad59da59ecc869d87525406..e2e056f8a1c4bff251eb21e037f8ee67633c9603 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,7 +11,8 @@ export default defineNuxtConfig({
         '@nuxtjs/mdc',
         '@nuxtjs/device',
         '@vueuse/nuxt',
-        '@pinia/nuxt'
+        '@pinia/nuxt',
+        '@formkit/auto-animate/nuxt'
     ],
     ui: {
         icons: ['simple-icons']
diff --git a/pages/library/index.vue b/pages/library/index.vue
index 4ab86abb9ed159b0f5f4e136b28958e1845f6e57..ecdf7ef213fe80ef3ef0fa4fa507e7456a98ada8 100644
--- a/pages/library/index.vue
+++ b/pages/library/index.vue
@@ -4,7 +4,7 @@
         <div class="container max-w-screen-lg flex flex-col p-6">
             <div class="flex gap-10">
                 <div class="flex flex-col flex-grow">
-                    <div class="flex flex-col gap-4">
+                    <div v-auto-animate class="flex flex-col gap-4">
                         <ILibraryThread
                             v-for="item in threads"
                             :item="item"