Testing Nuxt

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
-    <MyFirstStory />
-  </div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>

components/MyFirstStory.vue

@@ -1,10 +1,59 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import MyNuxtLink from "./MyNuxtLink";
+</script>
 
 <template>
-  <div
-    class="shadow-lg text-white h-screen flex justify-center items-center text-2xl bg-black"
-  >
-    My First Story
+  <div class="bg-slate-700 shadow-lg text-white h-screen flex justify-center items-center text-2xl">
+    <ul>
+      <li>
+        <a href="https://github.com/Archetipo95">HTML link</a>
+      </li>
+      <li>
+        <NuxtLink to="/about"> About page </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink v-slot="{ navigate }" to="/about" custom>
+          <button @click="navigate">Custom about page</button>
+        </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink to="https://nuxtjs.org"> Nuxt website </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink v-slot="{ href, target }" to="https://nuxtjs.org" custom>
+          <a :href="href" :target="target">Go to {{ href }}</a>
+        </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink to="https://twitter.com/nuxt_js" target="_blank">
+          Nuxt Twitter with a blank target
+        </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink to="https://discord.nuxtjs.org" target="_blank" rel="noopener">
+          Nuxt Discord with a blank target and custom rel value
+        </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink to="https://github.com/nuxt" no-rel>
+          Nuxt GitHub without rel attribute
+        </NuxtLink>
+      </li>
+      <li>
+        <MyNuxtLink to="https://nuxtjs.org">
+          Nuxt website with a custom link component with no default rel
+          attribute
+        </MyNuxtLink>
+      </li>
+      <li>
+        <MyNuxtLink to="/">
+          Index page with a custom link component with a custom active class
+        </MyNuxtLink>
+      </li>
+      <li>
+        <NuxtLink>Link without href and to</NuxtLink>
+      </li>
+    </ul>
   </div>
 </template>
 

components/MyNuxtLink.ts

@@ -0,0 +1,6 @@
+export default defineNuxtLink({
+    componentName: 'MyNuxtLink',
+    externalRelAttribute: '',
+    activeClass: 'active',
+    exactActiveClass: 'exact-active'
+  })

pages/about.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+    about page
+</template>

pages/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+
+<template>
+    homepage
+    <MyFirstStory />
+</template>

tailwind.config.ts

@@ -10,14 +10,14 @@ export default <Partial<Config>>{
     "./nuxt.config.{js,ts}",
   ],
   theme: {
-    colors:{
-      black: "#000",
-      white: "#fff",
-      red: "#f00",
-      green: "#0f0",
-      blue: "#00f",
-    },
     extend: {
+      colors:{
+        black: "#000",
+        white: "#fff",
+        red: "#f00",
+        green: "#0f0",
+        blue: "#00f",
+      },
     },
   },
   plugins: [],