docs(example): Nuxt Data Fetch

examples/next/hybrid-sitemap-apollo/.wp-env.json

@@ -1,10 +1,28 @@
 {
-    "phpVersion": "7.4",
+
     "plugins": [
       "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
       "https://github.com/AdvancedCustomFields/acf/releases/download/6.3.12/advanced-custom-fields-6.3.12.zip",
       "https://github.com/wp-graphql/wpgraphql-acf/releases/latest/download/wpgraphql-acf.zip"
     ],
+
+      "core": null,
+      "env": {
+        "development": {
+          "config": {
+
+          },
+          "port": 8886
+        },
+        "tests": {
+          "config": {
+
+          },
+          "port": 8887
+        }
+      },
+
+
     "config": {
       "WP_DEBUG": true,
       "SCRIPT_DEBUG": false,

examples/next/hybrid-sitemap-apollo/example-app/src/pages/sitemap.xml.js

@@ -1,7 +1,7 @@
 import { XMLParser } from 'fast-xml-parser';
 
 const wordpressUrl =
-  (process.env.NEXT_PUBLIC_WORDPRESS_URL || "http://localhost:8888").trim();
+  (process.env.NEXT_PUBLIC_WORDPRESS_URL || "http://localhost:8886").trim();
 const frontEndUrl =
   (process.env.NEXT_PUBLIC_FRONTEND_URL || "http://localhost:3000").trim();
 
@@ -55,7 +55,7 @@ export async function getServerSideProps({ req, res }) {
   const wpSitemapUrl = sitemapParam
     ? `${trimSlashes(wordpressUrl)}/${sitemapParam.replace(/^\/+/, '')}`
     : `${trimSlashes(wordpressUrl)}/sitemap.xml`;
-  
+
   console.debug("Fetching sitemap", wpSitemapUrl);
   const response = await fetch(wpSitemapUrl);
 

examples/nuxt/data-fetch/.wp-env.json

@@ -0,0 +1,37 @@
+{
+  "phpVersion": "8.3",
+  "plugins": [
+    "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
+    "https://downloads.wordpress.org/plugin/classic-editor.latest-stable.zip",
+    "https://downloads.wordpress.org/plugin/wpgraphql-ide.latest-stable.zip"
+  ],
+  "themes": [
+    "https://downloads.wordpress.org/theme/twentytwentyone.latest-stable.zip"
+  ],
+  "env": {
+    "development": {
+      "port": 8890,
+      "mysqlPort": 55090
+    },
+    "tests": {
+      "port": 8891,
+      "mysqlPort": 55091
+    }
+  },
+  "config": {
+    "WP_DEBUG": true,
+    "SCRIPT_DEBUG": false,
+    "GRAPHQL_DEBUG": true,
+    "WP_DEBUG_LOG": true,
+    "WP_DEBUG_DISPLAY": false,
+    "SAVEQUERIES": false
+  },
+  "mappings": {
+    "db": "./wp-env/db",
+    "wp-content/uploads": "./wp-env/uploads",
+    ".htaccess": "./wp-env/setup/.htaccess"
+  },
+  "lifecycleScripts": {
+    "afterStart": "wp-env run cli -- wp theme activate twentytwentyone && wp-env run cli -- wp theme delete --all && wp-env run cli -- wp plugin delete hello-dolly && wp-env run cli -- wp rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush"
+  }
+}

examples/nuxt/data-fetch/README.md

@@ -0,0 +1,18 @@
+# Nuxt Data fetching
+
+In this example we show how to implement the WP Template Hierarchy in SvelteKit for use with a Headless WordPress backend using WPGraphQL. We use URQL for all routing and fetching page content.
+
+## Getting Started
+
+> [!IMPORTANT]
+> Docker Desktop needs to be installed to run WordPress locally.
+
+1. Run `npm run example:setup` to install dependencies and configure the local WP server.
+2. Run `npm run example:start` to start the WP server and SvelteKit development server.
+
+> [!NOTE]
+> When you kill the long running process this will not shutdown the local WP instance, only SvelteKit. You must run `npm run example:stop` to kill the local WP server.
+
+## Trouble Shooting
+
+To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts.

examples/nuxt/data-fetch/example-app/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

examples/nuxt/data-fetch/example-app/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

examples/nuxt/data-fetch/example-app/app.vue

@@ -0,0 +1,14 @@
+<script setup>
+import Header from './components/Header.vue';
+import Footer from './components/Footer.vue';
+</script>
+
+<template>
+  <div>
+    <Header />
+    <main class="container mx-auto px-4">
+      <NuxtPage />
+    </main>
+    <Footer />
+  </div>
+</template>