components/ButtonToTop.vue

@@ -1,23 +1,16 @@
 <template>
-  <Teleport to="body"> <a href="#" class="go-top" /></Teleport>
+  <a href="#" class="go-top" />
 </template>
 
-<style>
-body {
-  display: grid;
-  grid-template-columns: 0 auto;
-}
-</style>
-
 <style scoped>
 .go-top {
   --offset: 20rem;
   position: sticky;
   bottom: 1rem;
   left: 1rem;
+  margin-right: 1rem;
   place-self: end;
   margin-top: calc(100vh + var(--offset));
-
   width: 2rem;
   height: 2rem;
   background: #ff8b24;

layouts/default.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import Navbar from "../components/Navbar.vue";
-
+// this is in /components so i can import the thing
 useHead({ title: "Eggworld" });
 </script>
 
@@ -25,6 +24,7 @@ useHead({ title: "Eggworld" });
       </p>
     </footer>
   </div>
+  <slot name="top-button" />
 </template>
 
 <style>

layouts/error.vue

@@ -0,0 +1 @@
+<template>error!</template>

layouts/withtop.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import Default from "./default.vue";
+</script>
+
+<template>
+  <Default>
+    <slot />
+    <template #top-button> <ButtonToTop /> </template>
+  </Default>
+</template>
+
+<style>
+div#__nuxt {
+  display: grid;
+  grid-template-columns: auto 0;
+}
+</style>

pages/index.vue

@@ -2,6 +2,7 @@
 import Services from "@/components/index/services.vue";
 import About from "@/components/index/about.vue";
 
+definePageMeta({ layout: "withtop" });
 useTitle("Home");
 </script>