fix: prerender issue for pagination component

Signed-off-by: nurRiyad <[email protected]>

components/navbar-item.vue

@@ -74,7 +74,7 @@
             </li>
             <li>
               <NuxtLink
-                href="/news"
+                href="/news/pages/1"
                 :class="getDropdownLinkStyle('news')"
                 :aria-current="getAriaCurrent('news')"
                 @click="hideDropDownMenu"

components/pagination-item.vue

@@ -4,15 +4,15 @@
     class="flex p-5 justify-center"
   >
     <div class="join">
-      <button
+      <NuxtLink
         v-for="page in pageNumbers"
         :key="page"
         :class="{ 'btn-primary': page === currentPage, 'btn-disabled': page === '...' }"
+        :to="`/news/pages/${page}`"
         class="join-item btn no-animation"
-        @click="handlePageChange(page)"
       >
         {{ page }}
-      </button>
+      </NuxtLink>
     </div>
   </div>
 </template>
@@ -40,10 +40,4 @@ const pageNumbers = computed(() => {
     return Array.from({ length: ttlPage.value }, (_, i) => i + 1)
   }
 })
-
-const handlePageChange = (page: number | string) => {
-  if (typeof page === 'number') {
-    currentPage.value = page
-  }
-}
 </script>

nuxt.config.ts

@@ -15,6 +15,7 @@ export default defineNuxtConfig({
     dataValue: 'theme', // for daisyUI
   },
   routeRules: {
+    '/news': { redirect: { to: '/news/pages/1' } },
     '/products/download': { redirect: { to: '/products', statusCode: 302 } },
     '/download': { redirect: { to: '/products', statusCode: 302 } },
   },

pages/news/index.vue → pages/news/pages/[page].vue

@@ -70,6 +70,19 @@ const { data } = await useAsyncData('news-items-list', () =>
 
 const currentPage = ref(1)
 const itemPerPage = 9
+const totalBlogs = data.value?.length || 1
+const totalPage = Math.ceil(totalBlogs / itemPerPage)
+const route = useRoute()
+
+watch(() => route.params.page, async (n) => {
+  if (typeof n === 'string') {
+    const pageNo = parseInt(n)
+    if (pageNo && pageNo > 0 && pageNo <= totalPage) {
+      currentPage.value = pageNo
+    }
+    else await navigateTo('/news/pages/1')
+  }
+}, { immediate: true })
 
 const paginatedData = computed(() => {
   const startIndex = itemPerPage * (currentPage.value - 1)