Remove content loader and animate plugins

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

.vscode/settings.json

@@ -14,6 +14,7 @@
   "cSpell.words": [
     "cloudinary",
     "Namecheap",
+    "nurriyad",
     "Nuxt",
     "spacegrotesk",
     "Tailwindcss",

components/blog/Loader.vue

@@ -1,23 +0,0 @@
-<script>
-import { ContentLoader } from 'vue-content-loader'
-
-export default {
-  components: { ContentLoader },
-}
-</script>
-
-<template>
-  <ContentLoader
-    viewBox="0 0 400 160"
-    :speed="2"
-    primary-color="#c9c9c9"
-    secondary-color="#ecebeb"
-  >
-    <rect x="10" y="13" rx="0" ry="0" width="95" height="86" />
-    <rect x="119" y="19" rx="0" ry="0" width="219" height="16" />
-    <rect x="119" y="49" rx="0" ry="0" width="277" height="16" />
-    <rect x="119" y="82" rx="0" ry="0" width="56" height="14" />
-    <rect x="195" y="82" rx="0" ry="0" width="56" height="14" />
-    <rect x="272" y="82" rx="0" ry="0" width="56" height="14" />
-  </ContentLoader>
-</template>

nuxt.config.ts

@@ -56,6 +56,7 @@ export default defineNuxtConfig({
     '@nuxtjs/fontaine',
     '@nuxtjs/color-mode',
     '@nuxtjs/tailwindcss',
+    '@formkit/auto-animate',
     '@stefanobartoletti/nuxt-social-share',
   ],
 

package.json

@@ -1,5 +1,8 @@
 {
+  "name": "@nurriyad/nuxt-blog",
+  "version": "1.4.0",
   "private": true,
+  "license": "MIT",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -11,7 +14,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.42.0",
-    "@formkit/auto-animate": "^0.8.1",
+    "@formkit/auto-animate": "^0.8.2",
     "@nuxt/content": "^2.12.1",
     "@nuxt/image": "^1.8.0",
     "@nuxtjs/color-mode": "^3.3.2",
@@ -29,8 +32,6 @@
     "nuxt": "^3.13.2",
     "nuxt-icon": "^0.6.8",
     "nuxt-og-image": "^3.0.0-rc.38",
-    "typescript": "^5.3.3",
-    "vue-content-loader": "^2.0.1"
-  },
-  "version": "1.4.0"
+    "typescript": "^5.3.3"
+  }
 }

pages/blogs/index.vue

@@ -91,35 +91,27 @@ defineOgImage({
       >
     </div>
 
-    <ClientOnly>
-      <div v-auto-animate class="space-y-5 my-5 px-4">
-        <template v-for="post in paginatedData" :key="post.title">
-          <ArchiveCard
-            :path="post.path"
-            :title="post.title"
-            :date="post.date"
-            :description="post.description"
-            :image="post.image"
-            :alt="post.alt"
-            :og-image="post.ogImage"
-            :tags="post.tags"
-            :published="post.published"
-          />
-        </template>
-
+    <div v-auto-animate class="space-y-5 my-5 px-4">
+      <template v-for="post in paginatedData" :key="post.title">
         <ArchiveCard
-          v-if="paginatedData.length <= 0"
-          title="No Post Found"
-          image="/not-found.jpg"
+          :path="post.path"
+          :title="post.title"
+          :date="post.date"
+          :description="post.description"
+          :image="post.image"
+          :alt="post.alt"
+          :og-image="post.ogImage"
+          :tags="post.tags"
+          :published="post.published"
         />
-      </div>
-
-      <template #fallback>
-        <!-- this will be rendered on server side -->
-        <BlogLoader />
-        <BlogLoader />
       </template>
-    </ClientOnly>
+
+      <ArchiveCard
+        v-if="paginatedData.length <= 0"
+        title="No Post Found"
+        image="/not-found.jpg"
+      />
+    </div>
 
     <div class="flex justify-center items-center space-x-6 ">
       <button :disabled="pageNumber <= 1" @click="onPreviousPageClick">

plugins/formik.client.ts

@@ -1,6 +0,0 @@
-import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  // Doing something with nuxtApp
-  nuxtApp.vueApp.use(autoAnimatePlugin)
-})