added index text

package.json

@@ -51,6 +51,7 @@
     "@nuxt/module-builder": "^0.6.0",
     "@nuxt/schema": "^3.11.2",
     "@nuxt/test-utils": "^3.12.1",
+    "@tailwindcss/typography": "^0.5.13",
     "@types/node": "^20.12.11",
     "autoprefixer": "^10.4.19",
     "changelogen": "^0.5.5",

playground/components/nav/NavBar.vue

@@ -10,7 +10,7 @@ import ContentWidthContainer from "~/components/ContentWidthContainer.vue";
           <NuxtLink href="/" class="px-4 py-2 hover:bg-gray-800"> Home </NuxtLink>
 
           <NuxtLink href="/register" class="px-4 py-2 hover:bg-gray-800"> Register </NuxtLink>
-          <NuxtLink href="/register-precog" class="px-4 py-2 hover:bg-gray-800"> Register-Precognitive </NuxtLink>
+          <NuxtLink href="/register-precog" class="px-4 py-2 hover:bg-gray-800"> Register-Precognition </NuxtLink>
         </div>
       </div>
     </ContentWidthContainer>

playground/pages/index.vue

@@ -1,5 +1,29 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div>Home</div>
+  <div class="prose prose-invert">
+    <h1>Nuxt Precognition Example</h1>
+    <div>
+      <p>This is a playground for testing the Nuxt Precognition module.</p>
+      <p>There are two different registration form examples which you can try out:</p>
+      <p>
+        The first "Register" is a form which uses the <code>useForm</code> composable. Form data is sent to the server
+        and validated upons submission.
+      </p>
+      <p>
+        The useForm composable is used to provide some very convenient lifecycle hooks for the form, as well as nice
+        validation and error handling.
+      </p>
+
+      <NuxtLink to="/register-form">Register Form</NuxtLink>
+
+      <p>The second "Register-Precog"is a form which uses the <code>usePrecognitionForm</code> composable.</p>
+      <p>
+        In addition to the features of the <code>useForm</code> composable, the usePrecognitionForm composable also
+        provides a <code>validate</code> method which can be used to validate the form data before the form is
+        submitted. This method is called on the @change hook of the inputs to validate as the user is entering data.
+      </p>
+      <NuxtLink to="/register-precog">Register Precognition</NuxtLink>
+    </div>
+  </div>
 </template>

playground/tailwind.config.js

@@ -12,5 +12,5 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require("@tailwindcss/typography")],
 };