feat: nuxt-use layout adjustments

AloisSeckar · Nov 17, 2023 · 093f305 · 093f305
1 parent 33fa6a3
commit 093f305
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 }}