From 093f3055f0d48eeb20fb483552734f4c0496394b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alois=20Se=C4=8Dk=C3=A1r?= <ellrohir@seznam.cz>
Date: Fri, 17 Nov 2023 18:39:12 +0100
Subject: [PATCH] feat: nuxt-use layout adjustments

---
 nuxt-use/app.vue          |  1 -
 nuxt-use/pages/index.vue  | 27 +++++++++++++++------------
 nuxt-use/pages/mouse.vue  | 14 +++++++++-----
 nuxt-use/pages/scroll.vue |  6 +++++-
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/nuxt-use/app.vue b/nuxt-use/app.vue
index 1df79b24..9c6fd6e1 100644
--- a/nuxt-use/app.vue
+++ b/nuxt-use/app.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     <h1>nuxt-use</h1>
-    <div>Various demos of <a href="https://vueuse.org/" title="VueUse">VueUse</a> features in Nuxt</div>
     <div>
       <NuxtPage />
     </div>
diff --git a/nuxt-use/pages/index.vue b/nuxt-use/pages/index.vue
index b48af844..7c29c585 100644
--- a/nuxt-use/pages/index.vue
+++ b/nuxt-use/pages/index.vue
@@ -1,14 +1,17 @@
 <template>
-  <ul>
-    <li>
-      <NuxtLink to="/mouse">
-        useMouse
-      </NuxtLink>
-    </li>
-    <li>
-      <NuxtLink to="/scroll">
-        useInfiniteScroll
-      </NuxtLink>
-    </li>
-  </ul>
+  <div>
+    <div>Various demos of <a href="https://vueuse.org/" title="VueUse">VueUse</a> features in Nuxt</div>
+    <ul>
+      <li>
+        <NuxtLink to="/mouse">
+          useMouse
+        </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink to="/scroll">
+          useInfiniteScroll
+        </NuxtLink>
+      </li>
+    </ul>
+  </div>
 </template>
diff --git a/nuxt-use/pages/mouse.vue b/nuxt-use/pages/mouse.vue
index 592c8c8c..35c1d50f 100644
--- a/nuxt-use/pages/mouse.vue
+++ b/nuxt-use/pages/mouse.vue
@@ -1,10 +1,13 @@
 <template>
   <div>
-    <p>
-      <pre style="display: inline-block;">useMouse</pre> returns reactive coordinates of current mouse position:
-      <pre style="display: inline-block;">{{ x }}:{{ y }}</pre>
-      <br>Here it is used in conjunction with `v-bind` to CSS `top` and `left` attributes to create an element that always follows the cursor.
-    </p><div class="mouse-follower" />
+    <NuxtLink to="/" title="Back to index">
+      &lt;&lt;
+    </NuxtLink>
+    &nbsp;
+    <pre style="display: inline-block;">useMouse</pre> returns reactive coordinates of current mouse position:
+    <pre style="display: inline-block;">{{ x }}:{{ y }}</pre>
+    <br>Here it is used in conjunction with `v-bind` to CSS `top` and `left` attributes to create an element that always follows the cursor.
+    <div class="mouse-follower" />
   </div>
 </template>
 
@@ -20,5 +23,6 @@ const { x, y } = useMouse()
     background-color: red;
     top: v-bind('y + "px"');
     left: v-bind('x + "px"');
+    z-index: -1;
   }
   </style>
diff --git a/nuxt-use/pages/scroll.vue b/nuxt-use/pages/scroll.vue
index d427d3b2..255b7f2c 100644
--- a/nuxt-use/pages/scroll.vue
+++ b/nuxt-use/pages/scroll.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <p><pre style="display: inline-block;">useInfiniteScroll</pre> allows user to keep scrolling down and new items will be dynamically loaded</p>
+    <NuxtLink to="/" title="Back to index">
+      &lt;&lt;
+    </NuxtLink>
+    &nbsp;
+    <pre style="display: inline-block;">useInfiniteScroll</pre> allows user to keep scrolling down and new items will be dynamically loaded
     <div ref="list" style="border: 1px solid black; height: 180px; overflow: auto;">
       <div v-for="item in data" :key="item">
         {{ item }}