chore: Add/nuxt gforms example

examples/nuxt/nuxt-headlesswp-gravity-forms/.wp-env.json

@@ -0,0 +1,23 @@
+{
+  "phpVersion": "7.4",
+  "plugins": [
+    "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
+    "https://github.com/AxeWP/wp-graphql-gravity-forms/releases/latest/download/wp-graphql-gravity-forms.zip"
+  ],
+  "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 rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush"
+  }
+}

examples/nuxt/nuxt-headlesswp-gravity-forms/README.md

@@ -0,0 +1,111 @@
+# Example: Gravity Forms in Headless WordPress with Nuxt/Vue
+
+This example shows you how to wire up a full headless WordPress backend—complete with Gravity Forms, WPGraphQL, and a pre-built "Questionnaire" form—alongside a Nuxt 3 front end that dynamically renders your forms using the GraphQL interfaces feature of WPGraphQL for Gravity Forms.
+
+## Features
+
+- **Headless WordPress with Gravity Forms**
+
+  - Stand up WP + WPGraphQL + Gravity Forms (and your Questionnaire JSON) in one command.
+
+- **Dynamic form rendering**
+
+  - Use GraphQL interfaces (`GfFieldWithLabelSetting`, `GfFieldWithChoicesSetting`, etc.) plus a single `useFormFields` composable to automatically map any new field type to the correct Vue component.
+
+- **Composable Nuxt 3 front end**
+
+  - Fetch your form schema with `useGravityForm` and render all fields via a dynamic `<component :is="resolveFieldComponent(field)" … />` pattern.
+
+- **Out-of-the-box data**
+  - Includes a SQL dump of WP + Gravity Forms data and a zipped uploads folder so you can dive right in.
+
+## Project Structure
+
+```
+
+```
+
+example-app/
+├── components/ # Vue form-field components & barrel file
+├── composables/ # useGravityForm.js & useFormFields.js
+├── pages/ # Nuxt page (index.vue) that renders the form
+└── nuxt.config.ts # Nuxt application config
+wp-env/
+│ ├── db/
+│ │ └── database.sql # WordPress + Gravity Forms schema & data
+│ ├── setup/
+│ │ └── .htaccess # CORS + pretty-permalinks for wp-env
+│ └── uploads.zip # wp-content/uploads media files
+├── .wp-env.json # @wordpress/env configuration
+├── package.json # wp-env + Nuxt dev scripts
+
+````
+
+## Running the Example with wp-env
+
+### Prerequisites
+
+- Node.js (v18+ recommended)
+- npm
+- Docker (so that @wordpress/env can spin up the WP container)
+
+### Setup Repository and Install
+
+```bash
+git clone https://github.com/your-org/nuxt-gravityforms-example.git
+cd nuxt-gravityforms-example
+npm install
+
+echo "NUXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > example-app/.env
+````
+
+### Quick Start
+
+1. Unzip uploads, start WP, import DB, then launch Nuxt:
+
+   ```bash
+   npm run example:build
+   ```
+
+2. Or run steps separately:
+
+   ```bash
+   # Start WP
+   npm run wp:start
+
+   # Import DB
+   npm run wp:db:import
+
+   # Unzip uploads
+   npm run wp:images:unzip
+
+   # Start Nuxt dev server
+   npm run dev
+   ```
+
+By the end, you will have:
+
+- WordPress Admin: http://localhost:8888/wp-admin/
+  - user: admin / pass: password
+- Nuxt Front End: http://localhost:3000/
+
+## Scripts
+
+| Command                   | Description                                                      |
+| ------------------------- | ---------------------------------------------------------------- |
+| `npm run example:build`   | Unzip media → start WP env → import DB → launch Nuxt dev server  |
+| `npm run example:start`   | Start WP env, then Nuxt dev server                               |
+| `npm run example:stop`    | Stop the WordPress environment (wp-env stop)                     |
+| `npm run example:prune`   | Destroy & rebuild the WP environment, then restart—all in one go |
+| `npm run wp:start`        | @wordpress/env start (launches PHP/MySQL container with WP)      |
+| `npm run wp:stop`         | @wordpress/env stop                                              |
+| `npm run wp:db:import`    | Import the SQL dump into the running WP container                |
+| `npm run wp:db:export`    | Export the current WP database back to wp-env/db/database.sql    |
+| `npm run wp:images:unzip` | Clear & unzip wp-env/uploads.zip → populates wp-content/uploads  |
+| `npm run dev`             | Start the Nuxt 3 development server on port 3000                 |
+
+> **Tip:** You can also run any arbitrary WP-CLI command inside the container via `npm run wp:cli -- <wp-cli-command>`
+
+## Database Access
+
+If you need direct database access (phpMyAdmin), add a `"phpmyadminPort": 11111` entry to your `.wp-env.json` and then navigate to http://localhost:11111.

examples/nuxt/nuxt-headlesswp-gravity-forms/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/nuxt-headlesswp-gravity-forms/example-app/README.md

@@ -0,0 +1,73 @@
+# Nuxt 3 Headless WordPress with Gravity Forms
+
+This project demonstrates how to integrate Nuxt 3 with WordPress as a headless CMS, specifically focusing on Gravity Forms integration using WPGraphQL and WPGraphQL for Gravity Forms.
+
+## Project Overview
+
+This project includes several demo routes:
+
+- `/headlesswp-gform`: Main demo showcasing Gravity Forms integration with WPGraphQL
+- `/products`: Test route using a dummy REST API (for API integration testing)
+- `/wpblog`: Test route demonstrating native WordPress post data fetching
+
+## Prerequisites
+
+- WordPress installation with:
+  - WPGraphQL plugin
+  - WPGraphQL for Gravity Forms plugin
+  - Gravity Forms plugin
+- Nuxt 3
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+
+```
+
+## Environment Variables
+
+Create a `.env` file with:
+
+```bash
+WORDPRESS_URL=
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+
+
+
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/assets/css/tailwind.css

@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-gray-50;
+}
+
+@layer components {
+  .btn {
+    @apply bg-[#12b488] text-white px-3 py-2 rounded-md text-sm text-white inline-block;
+  }
+  .card {
+    @apply p-3 rounded-md bg-white shadow-md h-full;
+  }
+}