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 Nuxt for use with a Headless WordPress backend using WPGraphQL.
+
+## 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 Nuxt development server.
+
+> [!NOTE]
+> When you kill the long running process this will not shutdown the local WP instance, only Nuxt. 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,28 @@
+<script setup>
+import { onMounted } from 'vue';
+import { initializePostsPerPageCache } from './lib/utils';
+import Header from './components/Header.vue';
+import Footer from './components/Footer.vue';
+
+// // Initialize on both client and server
+// initializePostsPerPageCache().catch(err => {
+//   console.error('Error initializing cache in app.vue:', err);
+// });
+
+// // Also try on mount just to be sure
+// onMounted(() => {
+//   initializePostsPerPageCache().catch(err => {
+//     console.error('Error initializing cache on mount:', err);
+//   });
+// });
+</script>
+
+<template>
+  <div>
+    <Header />
+    <main class="container mx-auto px-4">
+      <NuxtPage />
+    </main>
+    <Footer />
+  </div>
+</template>

examples/nuxt/data-fetch/example-app/assets/scss/_variables.scss

@@ -0,0 +1,24 @@
+// Colors
+$primary-color: #0066cc;
+$secondary-color: #ff6600;
+$text-color: #333333;
+$light-bg: #f8f8f8;
+$border-color: #eeeeee;
+$gutter: 1rem;
+// Spacing
+$spacing-unit: 8px;
+$spacing-small: $spacing-unit;
+$spacing-medium: $spacing-unit * 2;
+$spacing-large: $spacing-unit * 3;
+$spacing-xlarge: $spacing-unit * 4;
+
+// Breakpoints
+$breakpoint-small: 576px;
+$breakpoint-medium: 768px;
+$breakpoint-large: 992px;
+$breakpoint-xlarge: 1200px;
+
+// Typography
+$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+$font-size-base: 16px;
+$line-height-base: 1.6;

examples/nuxt/data-fetch/example-app/assets/scss/components/button.scss

@@ -0,0 +1,14 @@
+@use "../variables" as *;
+
+.button {
+  padding: .5rem $gutter * 1.5;
+  color: white;
+  &.button-primary {
+    background-color: $primary-color;
+  }
+  &.button-link {
+    background-color: transparent;
+    color: $primary-color;
+    border: 1px solid $primary-color;
+  }
+}

examples/nuxt/data-fetch/example-app/assets/scss/components/post-card.scss

@@ -0,0 +1,95 @@
+@use "../variables" as *;
+.post-card {
+        overflow: auto;
+  margin-bottom: $gutter * 2;
+  .post-card-content {
+    border: 1px solid #ddd;
+    padding: $gutter;
+  }
+  header {
+    margin-bottom: 1rem;
+  }
+  .post-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    .author {
+      font-weight: bold;
+      color: #333;
+      display: flex;
+      align-items: center;
+      .author-name {
+        color: $primary-color;
+        text-decoration: none;
+        font-size: 0.75rem;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      .author-avatar {
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: 50%;
+        margin-right: 0.5rem;
+        vertical-align: middle;
+      }
+    }
+    time {
+      color: #666;
+      font-size: 0.65rem;
+    }
+  }
+  .categories-container {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 0.75rem;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+
+    .category {
+      background-color: #f0f0f0;
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      color: #555;
+      text-decoration: none;
+      &:hover {
+        background-color: #e0e0e0;
+      }
+    }
+  }
+.featured-image-container {
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  .post-title {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+        overflow-wrap: break-word;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+
+  .post-excerpt {
+    font-size: 0.875rem;
+    color: #333;
+    margin-bottom: 1rem;
+
+            overflow-wrap: break-word;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+
+  }
+  .read-more {
+    display: flex;
+    margin-top: $gutter;
+  }
+}

examples/nuxt/data-fetch/example-app/assets/scss/global.scss

@@ -0,0 +1,4 @@
+@use 'reset';
+@use 'layout';
+@use 'helpers';
+@use './components/button';