dx: playground improvements

Author: davidstackio

playground/nuxt.config.ts

@@ -2,6 +2,11 @@ export default defineNuxtConfig({
   modules: ['../src/module'],
   devtools: { enabled: true },
   compatibilityDate: '2025-05-13',
+  nuxtifyCore: {
+    brand: {
+      tagline: 'This is a sample tagline for the pages module.',
+    },
+  },
   nuxtifyPages: {
     navigation: {
       primary: [

playground/pages/index.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { useNuxtifyConfig, useServerSeoMeta } from '#imports'
+
+// App state
+const nuxtifyConfig = useNuxtifyConfig()
+const dialog = useDialog()
+const toast = useToast()
+
+// Page info
+useServerSeoMeta({
+  title: `${nuxtifyConfig.brand?.name} playground`,
+  description: `This is the ${nuxtifyConfig.brand?.name} playground.`,
+})
+
+// Functions
+const clickDialog = () => {
+  // Dialog
+  dialog.value.title = 'This is a dialog!'
+  dialog.value.message = 'It can have fun messages.'
+  dialog.value.action.function = () => {
+    dialog.value.show = false
+  }
+  dialog.value.show = true
+}
+const clickToast = () => {
+  // Toast
+  toast.value.message = 'This is a toast!'
+  toast.value.show = true
+}
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <v-container>
+          <v-row>
+            <v-col cols="12">
+              <h1>{{ nuxtifyConfig.brand?.name }} playground</h1>
+            </v-col>
+          </v-row>
+
+          <!-- Nuxtify config -->
+          <v-row>
+            <v-col cols="12">
+              <v-card class="pa-4">
+                <h2>nuxtifyConfig</h2>
+                <pre>{{ nuxtifyConfig }}</pre>
+              </v-card>
+            </v-col>
+          </v-row>
+
+          <!-- App dialog -->
+          <v-row>
+            <v-col cols="12">
+              <v-card class="pa-4">
+                <h2>AppDialog</h2>
+                <v-btn
+                  class="mt-2"
+                  @click="clickDialog"
+                >
+                  Show Dialog
+                </v-btn>
+              </v-card>
+            </v-col>
+          </v-row>
+
+          <!-- App toast -->
+          <v-row>
+            <v-col cols="12">
+              <v-card class="pa-4">
+                <h2>AppToast</h2>
+                <v-btn
+                  class="mt-2"
+                  @click="clickToast"
+                >
+                  Show Toast
+                </v-btn>
+              </v-card>
+            </v-col>
+          </v-row>
+
+          <!-- App loading -->
+          <v-row>
+            <v-col cols="12">
+              <v-card class="pa-4">
+                <h2>AppLoading</h2>
+                <AppLoading />
+              </v-card>
+            </v-col>
+          </v-row>
+
+          <!-- App logo -->
+          <v-row>
+            <v-col cols="12">
+              <v-card class="pa-4">
+                <h2>AppLogo</h2>
+                <AppLogo />
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

playground/pages/test.vue

@@ -3,16 +3,21 @@ const nuxtifyConfig = useNuxtifyConfig()
 </script>
 
 <template>
-  <div>
-    <h1>
-      @nuxtify/pages module playground!
-    </h1>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <h1>
+          This is a test page that overrides the default dynamic page layout.
+        </h1>
 
-    <v-btn>
-      Test Button
-    </v-btn>
+        <div class="mt-4">
+          This is the site tagline: <em>{{ nuxtifyConfig.brand.tagline }}</em>
+        </div>
 
-    <h2>nuxtifyConfig</h2>
-    <pre>{{ nuxtifyConfig }}</pre>
-  </div>
+        <v-btn class="mt-4">
+          Test Button
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>