Add About

layouts/default.vue

@@ -7,7 +7,9 @@ const { data: contacts } = await $trpc.contactList.useQuery();
 <template>
   <div id="app">
     <div id="sidebar">
-      <h1>Nuxt Contacts</h1>
+      <h1>
+        <NuxtLink to="/about">Nuxt Contacts</NuxtLink>
+      </h1>
       <div>
         <form id="search-form" role="search">
           <input
@@ -31,7 +33,7 @@ const { data: contacts } = await $trpc.contactList.useQuery();
         <ul v-if="contacts?.length">
           <li v-for="contact in contacts" :key="contact.id">
             <NuxtLink :to="{name: 'contacts-contactId', params: {contactId: contact.id}}">
-              <template v-if="contact.first || contact.last">{{contact.first}} {{contact.last}}</template>
+              <template v-if="contact.first || contact.last">{{ contact.first }} {{ contact.last }}</template>
               <i v-else>No Name</i>
               <span v-if="contact.favorite">★</span>
             </NuxtLink>

pages/about.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+</script>
+
+<template>
+  <div id="about">
+    <NuxtLink to="/">← Go to demo</NuxtLink>
+    <h1>About React Router Contacts</h1>
+
+    <div>
+      <p>
+        This is a demo application showing off some of the
+        powerful features of React Router, including
+        dynamic routing, nested routes, loaders, actions,
+        and more.
+      </p>
+
+      <h2>Features</h2>
+      <p>
+        Explore the demo to see how React Router handles:
+      </p>
+      <ul>
+        <li>
+          Data loading and mutations with loaders and
+          actions
+        </li>
+        <li>
+          Nested routing with parent/child relationships
+        </li>
+        <li>URL-based routing with dynamic segments</li>
+        <li>Pending and optimistic UI</li>
+      </ul>
+
+      <h2>Learn More</h2>
+      <p>
+        Check out the official documentation at{{ " " }}
+        <a href="https://reactrouter.com">
+          reactrouter.com
+        </a>{{ " " }}
+        to learn more about building great web
+        applications with React Router.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>