Add prefetching using `nuxt-link` (#1)

6 files changed, 30 insertions, 30 deletions

diff --git a/components/AdminSidebar.vue b/components/AdminSidebar.vue
index 0ad19fd..ad8e162 100644
--- a/components/AdminSidebar.vue
+++ b/components/AdminSidebar.vue
@@ -1,21 +1,21 @@
 <template lang="pug">
   ul.space-y-6.border-l.border-gray-300(class="dark:border-gray-800")
     li
-      a.block.border-l.pl-4.border-transparent.text-gray-700(
+      nuxt-link.block.border-l.pl-4.border-transparent.text-gray-700(
         :class="{'hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300': true, 'font-semibold hover:text-green-800 text-green-700 dark:text-green-400 dark:hover:text-green-500 border-green-500': page == 'admin'}"
-        href="/admin"
+        to="/admin"
       )
         | Users
     li
-      a.block.border-l.pl-4.border-transparent.text-gray-700(
+      nuxt-link.block.border-l.pl-4.border-transparent.text-gray-700(
         :class="{'hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300': true, 'font-semibold hover:text-green-800 text-green-700 dark:text-green-400 dark:hover:text-green-500 border-green-500': page == 'admin-models'}"
-        href="/admin/models"
+        to="/admin/models"
       )
         | Models
     li
-      a.block.border-l.pl-4.border-transparent.text-gray-700(
+      nuxt-link.block.border-l.pl-4.border-transparent.text-gray-700(
         :class="{'hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300': true, 'font-semibold hover:text-green-800 text-green-700 dark:text-green-400 dark:hover:text-green-500 border-green-500': page == 'admin-reports'}"
-        href="/admin/reports"
+        to="/admin/reports"
       )
         | Reports
 </template>
diff --git a/components/ModelBoxCard.vue b/components/ModelBoxCard.vue
index 0bb4419..c022577 100644
--- a/components/ModelBoxCard.vue
+++ b/components/ModelBoxCard.vue
@@ -2,7 +2,7 @@
   .model.shadow-sm.rounded-lg.bg-white.p-4.w-full.h-80.duration-300(
     class="hover:ease-out hover:shadow-md dark:bg-gray-800 dark:text-white"
   )
-    a(:href="'/models/'+model.id")
+    nuxt-link(:to="'/models/'+model.id")
       .image.bg-gray-900.rounded-xl.w-full.h-48.overflow-hidden
         file-preview(
           :path="model.uploads[0].filepath" 
@@ -12,12 +12,12 @@
 
     .space-y-3.mt-5
       h1.truncate.text-xl.font-medium 
-        a(:href="'/models/'+model.id" class="hover:underline") {{ model.name }}
+        nuxt-link(:to="'/models/'+model.id" class="hover:underline") {{ model.name }}
       div
         .mr-3.float-left
           user-avatar(:data="model.author")
         p.leading-8.truncate
-          a.text-green-800(class="hover:text-green-700 dark:text-green-300 dark:hover:text-green-200" :href="'/user/'+model.author_id")
+          nuxt-link.text-green-800(class="hover:text-green-700 dark:text-green-300 dark:hover:text-green-200" :to="'/user/'+model.author_id")
             | @
             span.underline {{ model.author.username }}
 
diff --git a/components/ModelReportsList.vue b/components/ModelReportsList.vue
index 7da07b1..f26845b 100644
--- a/components/ModelReportsList.vue
+++ b/components/ModelReportsList.vue
@@ -62,7 +62,7 @@
             .mr-3.float-left(style="flex-shrink: 0;" class="sm:float-none")
               user-avatar(:data="warning.user")
             p.leading-8.ml-2(class="sm:ml-0")
-              a.text-green-800(class="hover:text-green-700 dark:text-green-200 dark:hover:text-green-100" :href="'/user/'+warning.user.id")
+              nuxt-link.text-green-800(class="hover:text-green-700 dark:text-green-200 dark:hover:text-green-100" :to="'/user/'+warning.user.id")
                 | @
                 span.underline {{ warning.user.username }}
             p.leading-8.ml-0(class="sm:ml-5") {{ warning.note }}
@@ -87,7 +87,7 @@
             .mr-3.float-left(style="flex-shrink: 0;" class="sm:float-none")
               user-avatar(:data="warning.resolved")
             p.leading-8.ml-2(class="sm:ml-0")
-              a.text-green-800(class="hover:text-green-700 dark:text-green-200 dark:hover:text-green-100" :href="'/user/'+warning.user.id")
+              nuxt-link.text-green-800(class="hover:text-green-700 dark:text-green-200 dark:hover:text-green-100" :to="'/user/'+warning.user.id")
                 | @
                 span.underline {{ warning.resolved.username }}
             p.leading-8.ml-0(class="sm:ml-5") {{ warning.admin_note }}
diff --git a/components/Pagination.vue b/components/Pagination.vue
index 7925ab0..9910281 100644
--- a/components/Pagination.vue
+++ b/components/Pagination.vue
@@ -3,21 +3,21 @@
     nav(aria-label="Pagination")
       ul.flex.list-style-none.items-center.justify-center
         li.page-item(:class="{'cursor-not-allowed opacity-20 page-item disabled': page < 1}")
-          a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
-            :href="(page == 0) ? '#' : (path ?? '/')+'?page='+incrPage(-1)"
+          nuxt-link.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
+            :to="(page == 0) ? '#' : (path ?? '/')+'?page='+incrPage(-1)"
             class="hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white"
           )
             span.sr-only Previous
             svg.h-5.w-5(xmlns="http://www.w3.org/2000/svg", viewbox="0 0 20 20", fill="currentColor", aria-hidden="true")
               path(fill-rule="evenodd", d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clip-rule="evenodd")
         li.page-item(v-for="i in pages")
-          a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
-            :href="(path ?? '/')+'?page='+(i-1)" aria-current="page"
+          nuxt-link.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
+            :to="(path ?? '/')+'?page='+(i-1)" aria-current="page"
             :class="{'hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white': true, 'bg-green-500 text-green-50 hover:text-green-50': page == (i-1)}"
           ) {{ i-1 }}
         li.page-item(:class="{'cursor-not-allowed opacity-20 page-item disabled': page == pages-1}")
-          a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
-            :href="(page == (pages-1)) ? '#' : (path ?? '/')+'?page='+incrPage(1)"
+          nuxt-link.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
+            :to="(page == (pages-1)) ? '#' : (path ?? '/')+'?page='+incrPage(1)"
             class="hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white"
           )
             span.sr-only Next
diff --git a/components/VHeader.vue b/components/VHeader.vue
index 0814352..0a0938b 100644
--- a/components/VHeader.vue
+++ b/components/VHeader.vue
@@ -21,9 +21,9 @@
               </svg>
             .hidden(class="sm:ml-6 sm:block")
               .flex.space-x-4
-                a.text-white.px-3.py-2.rounded-md.text-sm.font-medium(:class="[routeName == 'index' ? 'bg-green-900': 'text-gray-300']" href="/" aria-current="page") Home
+                nuxt-link.text-white.px-3.py-2.rounded-md.text-sm.font-medium(:class="[routeName == 'index' ? 'bg-green-900': 'text-gray-300']" to="/" aria-current="page") Home
           .absolute.inset-y-0.right-0.flex.items-center.pr-2(class="sm:static sm:inset-auto sm:ml-6 sm:pr-0" v-if="isLogged")
-            a.leading-6.text-white.px-3.py-2.rounded-md.text-sm.font-medium(:class="['hidden sm:flex', routeName == 'create-model' ? 'bg-green-900': 'text-gray-300']" href="/create" aria-current="page")
+            nuxt-link.leading-6.text-white.px-3.py-2.rounded-md.text-sm.font-medium(:class="['hidden sm:flex', routeName == 'create-model' ? 'bg-green-900': 'text-gray-300']" to="/create" aria-current="page")
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
               </svg>
@@ -40,34 +40,34 @@
                 class="focus:outline-none dark:bg-gray-800" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"
                 v-if="boxUserInfo && me"
               )
-                a.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white sm:hidden" href="/create" role="menuitem" tabindex="-1")
+                nuxt-link.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white sm:hidden" to="/create" role="menuitem" tabindex="-1")
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                   </svg>
                   | Create
-                a.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" :href="'/user/'+me.id" role="menuitem" tabindex="-1")
+                nuxt-link.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" :to="'/user/'+me.id" role="menuitem" tabindex="-1")
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                   </svg>
                   | Your Profile
-                a.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" href="/admin" role="menuitem" tabindex="-1" v-if="me.is_staff")
+                nuxt-link.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" to="/admin" role="menuitem" tabindex="-1" v-if="me.is_staff")
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z" />
                   </svg>
                   | Admin
-                a.flex.leanding-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" href="/settings" role="menuitem" tabindex="-1")
+                nuxt-link.flex.leanding-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" to="/settings" role="menuitem" tabindex="-1")
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
                     <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                   </svg>
                   | Settings
-                a.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" href="#" role="menuitem" tabindex="-1" @click="logout")
+                nuxt-link.flex.leading-6.block.px-4.py-2.text-sm.text-gray-700(class="dark:text-white" to="#" role="menuitem" tabindex="-1" @click="logout")
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                   </svg>
                   | Sign out
           .absolute.inset-y-0.right-0.flex.items-center.pr-2(class="sm:static sm:inset-auto sm:ml-6 sm:pr-0" v-else)
-            a(href="/signin")
+            nuxt-link(to="/signin")
               button.text-white.flex.leading-6
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
@@ -75,7 +75,7 @@
                 | Sign
       #mobile-menu(class="sm:hidden" v-if="boxInfo")
         .space-y-1.px-2.pt-2.pb-3
-          a.text-white.block.px-3.py-2.rounded-md.text-base.font-medium(:class="[routeName == 'index' ? 'bg-green-900': 'text-gray-300']" href="/" aria-current="page") Home
+          nuxt-link.text-white.block.px-3.py-2.rounded-md.text-base.font-medium(:class="[routeName == 'index' ? 'bg-green-900': 'text-gray-300']" to="/" aria-current="page") Home
 
     header.bg-white.shadow(v-if="pageName")
       .mx-auto.max-w-7xl.py-6.px-4(class="sm:px-6 lg:px-8")
diff --git a/components/VTable.vue b/components/VTable.vue
index db7a9ae..ef06393 100644
--- a/components/VTable.vue
+++ b/components/VTable.vue
@@ -25,7 +25,7 @@
                         path(stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12")
                     span(v-else-if="name == 'avatar'")
                       .block(class="sm:flex")
-                        a.inline-block(:href="'/user/'+field.id" target="_blank")
+                        nuxt-link.inline-block(:to="'/user/'+field.id" target="_blank")
                           user-avatar(:data="field")
                         a.text-red-500.ml-2.cursor-pointer(
                           title="Delete this avatar"
@@ -37,20 +37,20 @@
 
 
                     span(v-else-if="['author', 'user', 'resolved'].includes(name)")
-                      a.inline-block(:href="'/user/'+field[name].id" target="_blank")
+                      nuxt-link.inline-block(:to="'/user/'+field[name].id" target="_blank")
                         user-avatar(:data="field[name]" v-if="field[name].username")
                     span(v-else-if="name == 'created' || name == 'updated'")
                       | {{ field[name]|moment("DD/MM/YYYY HH:mm") }}
                     span(v-else-if="name == 'likes'")
                       | {{ field.likes ? field.likes.length : 0 }}
                     span(v-else-if="name == 'model_id'")
-                      a.underline.text-green-500(:href="'/models/'+field.model_id" target="_blank")
+                      nuxt-link.underline.text-green-500(:to="'/models/'+field.model_id" target="_blank")
                         | {{ field[name] }}
                     span(v-else :title="field[name]") {{ field[name] }}
                 td.px-6.py-4.whitespace-nowrap.text-sm.text-gray-900(class="dark:text-white")
                   .flex
                     .mr-1(v-if="path")
-                      a(:href="path + field.id" target="_blank")
+                      nuxt-link(:to="path + field.id" target="_blank")
                         svg(xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6")
                           path(stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244")
                     .mr-1(v-if="editrow")