basic playground app

playground/app/app.config.ts

@@ -0,0 +1,7 @@
+export default defineAppConfig({
+  ui: {
+    variables: {
+
+    }
+  }
+})

playground/app/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <NuxtPage />
+    <StagingBanner />
+  </div>
+</template>

playground/app/layouts/default.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const { data: pages } = await useWPPages()
+const { data: posts } = await useWPPosts()
+</script>
+
+<template>
+  <div>
+    <header class="prose max-w-5xl mx-auto p-5">
+      Pages:
+      <span
+        v-for="page, index in pages"
+        :key="index"
+      >
+        <NuxtLink
+          v-if="page.slug"
+          :to="'/' + page.slug"
+        >
+          {{ page.title }}
+        </NuxtLink>
+        <span v-if="index !== pages.length - 1"> - </span>
+      </span>
+      <br>
+      Posts:
+      <span
+        v-for="post, index in posts"
+        :key="index"
+      >
+        <NuxtLink
+          v-if="post.slug"
+          :to="'/' + post.slug"
+        >
+          {{ post.title }}
+        </NuxtLink>
+        <span v-if="index !== posts.length - 1"> - </span>
+      </span>
+      <br>
+    </header>
+    <hr>
+    <main class="prose max-w-5xl mx-auto p-5">
+      <slot />
+    </main>
+  </div>
+</template>

playground/app/pages/[...slug].vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useRoute } from 'nuxt/app'
+
+const route = useRoute()
+const post = ref<PostFragment | PageFragment | undefined>()
+if (route.params.slug && route.params.slug[0]) {
+  const { data } = await useWPNodeByUri({ uri: route.params.slug[0] })
+  post.value = data.value
+}
+
+definePageMeta({
+  colorMode: 'light'
+})
+</script>
+
+<template>
+  <NuxtLayout>
+    <BlockRenderer :blocks="post?.editorBlocks" />
+  </NuxtLayout>
+</template>