diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/.wp-env.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/.wp-env.json
new file mode 100644
index 00000000..810c6ed4
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md b/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md
new file mode 100644
index 00000000..0da632a8
--- /dev/null
+++ b/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.
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/.gitignore b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/.gitignore
new file mode 100644
index 00000000..4a7f73a2
--- /dev/null
+++ b/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
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/README.md b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/README.md
new file mode 100644
index 00000000..0287a36c
--- /dev/null
+++ b/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.
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/assets/css/tailwind.css b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/assets/css/tailwind.css
new file mode 100644
index 00000000..1565f44b
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/AddressField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/AddressField.vue
new file mode 100644
index 00000000..db2037df
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/AddressField.vue
@@ -0,0 +1,156 @@
+<script setup>
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true,
+  },
+  modelValue: {
+    type: Object,
+    default: () => ({
+      street: "",
+      lineTwo: "",
+      city: "",
+      state: "",
+      zip: "",
+      country: "US",
+    }),
+  },
+});
+
+const emit = defineEmits(["update:model-value"]);
+const errorMessage = ref("");
+
+const postalCodePatterns = {
+  US: /^\d{5}(-\d{4})?$/,
+  CA: /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/,
+  GB: /^([Gg][Ii][Rr] 0[Aa]{2}|[A-Za-z]{1,2}[0-9][0-9]?[A-Za-z]?[ ]?[0-9][A-Za-z]{2})$/,
+  AU: /^\d{4}$/,
+  NZ: /^\d{4}$/,
+};
+
+const updateField = (field, value) => {
+  const newValue = {
+    ...props.modelValue,
+    [field]: value,
+  };
+  emit("update:model-value", newValue);
+  validateAddress(newValue);
+};
+
+const validateAddress = (address) => {
+  const pattern = postalCodePatterns[address.country];
+
+  if (!address.street || !address.city || !address.state || !address.zip) {
+    errorMessage.value = "Please fill out all required fields.";
+  } else if (pattern && !pattern.test(address.zip)) {
+    errorMessage.value =
+      "Please enter a valid postal code for the selected country.";
+  } else {
+    errorMessage.value = "";
+  }
+};
+</script>
+
+<template>
+  <div class="field-wrapper">
+    <label>{{ field.label }}</label>
+    <div class="address-field-group">
+      <div class="full-width">
+        <input
+          :value="modelValue.street"
+          @input="(e) => updateField('street', e.target.value)"
+          placeholder="Street Address"
+          :required="field.isRequired"
+          class="form-input"
+        />
+      </div>
+      <div class="full-width">
+        <input
+          :value="modelValue.lineTwo"
+          @input="(e) => updateField('lineTwo', e.target.value)"
+          placeholder="Address Line 2"
+          class="form-input"
+        />
+      </div>
+      <div class="city-state-group">
+        <input
+          :value="modelValue.city"
+          @input="(e) => updateField('city', e.target.value)"
+          placeholder="City"
+          :required="field.isRequired"
+          class="form-input"
+        />
+        <input
+          :value="modelValue.state"
+          @input="(e) => updateField('state', e.target.value)"
+          placeholder="State/Province"
+          :required="field.isRequired"
+          class="form-input"
+        />
+      </div>
+      <div class="zip-country-group">
+        <input
+          :value="modelValue.zip"
+          @input="(e) => updateField('zip', e.target.value)"
+          placeholder="ZIP/Postal Code"
+          :required="field.isRequired"
+          class="form-input"
+        />
+        <select
+          :value="modelValue.country"
+          @change="(e) => updateField('country', e.target.value)"
+          :required="field.isRequired"
+          class="form-input"
+        >
+          <option value="US">United States</option>
+          <option value="CA">Canada</option>
+          <option value="GB">United Kingdom</option>
+          <option value="AU">Australia</option>
+          <option value="NZ">New Zealand</option>
+        </select>
+      </div>
+    </div>
+    <p v-if="errorMessage" class="text-red-500 text-sm">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.address-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.city-state-group,
+.zip-country-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin: 0;
+}
+
+.form-input:hover {
+  border-color: #b3b3b3;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+</style>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/ChoiceListField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/ChoiceListField.vue
new file mode 100644
index 00000000..22bbaf54
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/ChoiceListField.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="field-wrapper">
+    <label class="block text-sm font-medium text-gray-700 mb-2">
+      {{ field.label }}
+      <span v-if="field.isRequired" class="text-red-500">*</span>
+    </label>
+    <div class="space-y-2">
+      <div
+        v-for="(choice, index) in field.choices"
+        :key="choice.value"
+        class="flex items-center"
+      >
+        <input
+          :id="`${field.databaseId}-${index}`"
+          :type="inputType"
+          :value="choice.value"
+          :checked="isChecked(choice.value)"
+          @change="handleChange(choice.value, $event.target.checked)"
+          class="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
+        />
+        <label
+          :for="`${field.databaseId}-${index}`"
+          class="ml-2 block text-sm text-gray-700"
+        >
+          {{ choice.text }}
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  field: { type: Object, required: true },
+  modelValue: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+// Determine the input type: use radio if field.type is "RADIO", otherwise checkbox.
+const inputType = computed(() => {
+  return props.field.type.toUpperCase() === "RADIO" ? "radio" : "checkbox";
+});
+
+const isChecked = (value) => {
+  return Array.isArray(props.modelValue)
+    ? props.modelValue.includes(value)
+    : false;
+};
+
+const handleChange = (choiceValue, checked) => {
+  let newValue = [];
+  if (inputType.value === "checkbox") {
+    // For checkboxes, allow multiple selections.
+    const current = Array.isArray(props.modelValue) ? props.modelValue : [];
+    newValue = checked
+      ? [...current, choiceValue]
+      : current.filter((v) => v !== choiceValue);
+  } else {
+    // For radio, single selection (store in array for consistency).
+    newValue = [choiceValue];
+  }
+  emit("update:modelValue", newValue);
+};
+</script>
+
+<style scoped>
+.field-wrapper {
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/DateField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/DateField.vue
new file mode 100644
index 00000000..cbe735a4
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/DateField.vue
@@ -0,0 +1,39 @@
+<script setup>
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const handleInput = (e) => {
+  emit("update:modelValue", e.target.value);
+};
+</script>
+
+<template>
+  <div class="field-wrapper">
+    <label
+      :for="field.databaseId"
+      class="block text-sm font-medium text-gray-700"
+    >
+      {{ field.label }}
+      <span v-if="field.isRequired" class="text-red-500">*</span>
+    </label>
+    <input
+      :id="field.databaseId"
+      type="date"
+      :placeholder="field.placeholder"
+      :required="field.isRequired"
+      :value="modelValue"
+      @input="handleInput"
+      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+    />
+  </div>
+</template>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/DropdownField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/DropdownField.vue
new file mode 100644
index 00000000..3a5e62ca
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/DropdownField.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="field-wrapper">
+    <label
+      v-if="field.label"
+      :for="field.databaseId"
+      class="block text-sm font-medium text-gray-700"
+    >
+      {{ field.label }}
+      <span v-if="field.isRequired" class="text-red-500">*</span>
+    </label>
+    <select
+      :id="field.databaseId"
+      v-model="internalValue"
+      :required="field.isRequired"
+      :multiple="isMultiple"
+      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+    >
+      <option disabled value="">{{ placeholder }}</option>
+      <option
+        v-for="choice in field.choices"
+        :key="choice.value"
+        :value="choice.value"
+      >
+        {{ choice.text }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  field: { type: Object, required: true },
+  modelValue: { type: [String, Array], default: "" },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const internalValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
+
+const isMultiple = computed(() => {
+  return props.field.type.toUpperCase() === "MULTISELECT";
+});
+
+const placeholder = computed(() => {
+  return props.field.placeholder || "Select an option";
+});
+</script>
+
+<style scoped>
+.field-wrapper {
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/EmailField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/EmailField.vue
new file mode 100644
index 00000000..fbf19880
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/EmailField.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const errorMessage = ref("");
+
+const handleInput = (e) => {
+  const value = e.target.value;
+  emit("update:modelValue", value);
+  validateEmail(value);
+};
+
+const validateEmail = (email) => {
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Regex for email validation
+  if (!emailPattern.test(email)) {
+    errorMessage.value = "Please enter a valid email address.";
+  } else {
+    errorMessage.value = ""; // Clear error message if valid
+  }
+};
+</script>
+
+<template>
+  <div class="field-wrapper">
+    <label
+      :for="field.databaseId"
+      class="block text-sm font-medium text-gray-700"
+    >
+      {{ field.label }}
+      <span v-if="field.isRequired" class="text-red-500">*</span>
+    </label>
+    <input
+      :id="field.databaseId"
+      type="email"
+      :placeholder="field.placeholder"
+      :required="field.isRequired"
+      :value="modelValue"
+      @input="handleInput"
+      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+    />
+    <p v-if="errorMessage" class="text-red-500 text-sm">{{ errorMessage }}</p>
+  </div>
+</template>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/InputField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/InputField.vue
new file mode 100644
index 00000000..98be9337
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/InputField.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="field-wrapper">
+    <!-- Only render the label if it exists -->
+    <label
+      v-if="field.label"
+      :for="field.databaseId"
+      class="block text-sm font-medium text-gray-700"
+    >
+      {{ field.label }}
+      <span v-if="field.isRequired" class="text-red-500">*</span>
+    </label>
+    <!-- Render a dynamic input based on the computed input type -->
+    <input
+      :id="field.databaseId"
+      :type="computedInputType"
+      v-model="internalValue"
+      :placeholder="field.placeholder"
+      :required="field.isRequired"
+      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+// Create a computed property for v-model binding
+const internalValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
+
+// Determine the proper input type based on the field type
+const computedInputType = computed(() => {
+  const fieldType = props.field.type.toUpperCase();
+  if (fieldType === "EMAIL") {
+    return "email";
+  } else if (fieldType === "WEBSITE") {
+    return "url";
+  }
+  return "text";
+});
+</script>
+
+<style scoped>
+.field-wrapper {
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/NameField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/NameField.vue
new file mode 100644
index 00000000..673d0691
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/NameField.vue
@@ -0,0 +1,73 @@
+<script setup>
+import { reactive, watch } from "vue";
+
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true,
+  },
+  modelValue: {
+    type: Object,
+    default: () => ({
+      prefix: "",
+      first: "",
+      last: "",
+      suffix: "",
+    }),
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const nameValues = reactive({ ...props.modelValue });
+
+watch(
+  nameValues,
+  (newValues) => {
+    emit("update:modelValue", { ...newValues });
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div class="field-wrapper">
+    <label>{{ field.label }}</label>
+    <div class="name-field-group">
+      <input
+        v-model="nameValues.prefix"
+        placeholder="Prefix"
+        class="prefix-field"
+      />
+      <input
+        v-model="nameValues.first"
+        placeholder="First Name"
+        :required="field.isRequired"
+        class="first-field"
+      />
+      <input
+        v-model="nameValues.last"
+        placeholder="Last Name"
+        :required="field.isRequired"
+        class="last-field"
+      />
+      <input
+        v-model="nameValues.suffix"
+        placeholder="Suffix"
+        class="suffix-field"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.name-field-group {
+  display: grid;
+  grid-template-columns: 0.7fr 2fr 2fr 0.7fr;
+  gap: 10px;
+}
+
+.name-field-group input {
+  margin-bottom: 0;
+}
+</style>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/PhoneField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/PhoneField.vue
new file mode 100644
index 00000000..8d332acf
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/PhoneField.vue
@@ -0,0 +1,37 @@
+<script setup>
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <div class="field-wrapper">
+    <label
+      :for="field.databaseId"
+      class="block text-sm font-medium text-gray-700"
+    >
+      {{ field.label }}
+      <span v-if="field.isRequired" class="text-red-500">*</span>
+    </label>
+    <input
+      :id="field.databaseId"
+      type="tel"
+      :placeholder="field.placeholder || '123-456-7890'"
+      :required="field.isRequired"
+      :value="modelValue"
+      @input="emit('update:modelValue', $event.target.value)"
+      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+    />
+    <small class="text-gray-500 mt-1 block">Format: 123-456-7890</small>
+  </div>
+</template>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/TimeField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/TimeField.vue
new file mode 100644
index 00000000..8852241e
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/TimeField.vue
@@ -0,0 +1,38 @@
+<script setup>
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const handleInput = (e) => {
+  emit("update:modelValue", e.target.value);
+};
+</script>
+
+<template>
+  <div class="field-wrapper">
+    <label
+      :for="field.databaseId"
+      class="block text-sm font-medium text-gray-700"
+    >
+      {{ field.label }}
+      <span v-if="field.isRequired" class="text-red-500">*</span>
+    </label>
+    <input
+      :id="field.databaseId"
+      type="time"
+      :required="field.isRequired"
+      :value="modelValue"
+      @input="handleInput"
+      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+    />
+  </div>
+</template>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/index.js b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/index.js
new file mode 100644
index 00000000..f4493c93
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/form-fields/index.js
@@ -0,0 +1,9 @@
+export { default as InputField } from "./InputField.vue";
+export { default as EmailField } from "./EmailField.vue";
+export { default as DropdownField } from "./DropdownField.vue";
+export { default as ChoiceListField } from "./ChoiceListField.vue";
+export { default as AddressField } from "./AddressField.vue";
+export { default as DateField } from "./DateField.vue";
+export { default as TimeField } from "./TimeField.vue";
+export { default as NameField } from "./NameField.vue";
+export { default as PhoneField } from "./PhoneField.vue";
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/product/ProductCard.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/product/ProductCard.vue
new file mode 100644
index 00000000..8763e670
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/product/ProductCard.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="card text-center">
+    <img :src="`${product.image}`" class="thumb" />
+    <p class="font-bold text-gray-500 m-4 truncate">{{ product.title }}</p>
+    <NuxtLink :to="`/products/${product.id}`">
+      <p class="btn my-4">View Details</p>
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup>
+const { product } = defineProps(["product"]);
+</script>
+
+<style scoped>
+.thumb {
+  max-height: 120px;
+  max-width: 70%;
+  margin: 0 auto;
+}
+</style>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/product/ProductDetails.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/product/ProductDetails.vue
new file mode 100644
index 00000000..1d4139ed
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/product/ProductDetails.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="card">
+    <div class="grid grid-cols-2 gap-10">
+      <div class="p-7">
+        <img :src="`${product.image}`" class="mx-auto my-7" />
+      </div>
+      <div class="p-7">
+        <h2 class="text-4xl my-7">{{ product.title }}</h2>
+        <p class="text-xl my-7">Price - ${{ product.price }}</p>
+        <h3 class="font-bold border-b-2 mb-4 pb-2">Product description:</h3>
+        <p class="mb-7">{{ product.description }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { product } = defineProps(["product"]);
+</script>
+
+<style scoped>
+img {
+  max-width: 400px;
+}
+</style>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/wp/Post.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/wp/Post.vue
new file mode 100644
index 00000000..d51f4f58
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/wp/Post.vue
@@ -0,0 +1,18 @@
+<template>
+  <NuxtLink :to="`/wpblog${post.uri}`">
+    <div
+      class="flex items-center bg-gradient-to-r from-cyan-500 to-blue-500 p-8 rounded-lg text-white transition-all hover:-translate-y-1 hover:scale-105"
+    >
+      <div>
+        <h2 class="font-semibold text-2xl">{{ post.title }}</h2>
+        <p>{{ new Date(post.date).toLocaleDateString() }}</p>
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  post: Record<"title" | "date" | "excerpt" | "uri", string>;
+}>();
+</script>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/wp/TheHeader.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/wp/TheHeader.vue
new file mode 100644
index 00000000..88829ff6
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/components/wp/TheHeader.vue
@@ -0,0 +1,5 @@
+<template>
+  <header className="relative w-full p-6 h-85px mx-auto bg-slate-200">
+    <h1 className="text-4xl">Nuxt WP</h1>
+  </header>
+</template>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/composables/useFormFields.js b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/composables/useFormFields.js
new file mode 100644
index 00000000..a8ab0dd5
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/composables/useFormFields.js
@@ -0,0 +1,52 @@
+import { defineAsyncComponent } from "vue";
+
+export const useFormFields = () => {
+  const loggedTypes = new Set();
+
+  /**
+   * Resolves the Vue component for a given field based on its inputType.
+   * If inputType is not present, falls back to using type.
+   *
+   * @param {Object} field - The Gravity Form field object.
+   * @returns {Component|null} The async Vue component for this field.
+   */
+  const resolveFieldComponent = (field) => {
+    const fieldType = field.inputType
+      ? field.inputType.toUpperCase()
+      : field.type.toUpperCase();
+
+    const typeToComponent = {
+      ADDRESS: "AddressField",
+      TEXT: "InputField",
+      TEXTAREA: "InputField",
+      EMAIL: "EmailField",
+      NAME: "NameField",
+      PHONE: "PhoneField",
+      SELECT: "DropdownField",
+      MULTISELECT: "DropdownField",
+      CHECKBOX: "ChoiceListField",
+      RADIO: "ChoiceListField",
+      DATE: "DateField",
+      TIME: "TimeField",
+      WEBSITE: "InputField",
+      // Add any additional mappings if needed.
+    };
+
+    // Log the field type for debugging on the first occurrence.
+    if (!loggedTypes.has(fieldType)) {
+      console.log("Mapping field type:", fieldType);
+      loggedTypes.add(fieldType);
+    }
+
+    const componentName = typeToComponent[fieldType];
+    return componentName
+      ? defineAsyncComponent(() =>
+          import(`~/components/form-fields/${componentName}.vue`)
+        )
+      : null;
+  };
+
+  return {
+    resolveFieldComponent,
+  };
+};
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/composables/useGravityForm.js b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/composables/useGravityForm.js
new file mode 100644
index 00000000..35c27e3b
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/composables/useGravityForm.js
@@ -0,0 +1,236 @@
+import { ref } from "vue";
+import { useRuntimeConfig } from "#app";
+
+export default function useGravityForm() {
+  const config = useRuntimeConfig();
+  const formFields = ref([]);
+
+  const formQuery = `
+  query GetGravityForm($formId: ID!) {
+  gfForm(id: $formId, idType: DATABASE_ID) {
+    formFields(first: 300) {
+      nodes {
+        id
+        databaseId
+        inputType
+        type
+        visibility
+        ... on GfFieldWithLabelSetting {
+          label
+        }
+        ... on GfFieldWithRulesSetting {
+          isRequired
+        }
+        ... on GfFieldWithCssClassSetting {
+          cssClass
+        }
+        ... on GfFieldWithDefaultValueSetting {
+          defaultValue
+        }
+        ... on GfFieldWithSizeSetting {
+          size
+        }
+        ... on GfFieldWithPlaceholderSetting {
+          placeholder
+        }
+        ... on GfFieldWithMaxLengthSetting {
+          maxLength
+        }
+        ... on GfFieldWithInputMaskSetting {
+          inputMaskValue
+        }
+        ... on GfFieldWithChoicesSetting {
+          choices {
+            text
+            value
+          }
+          inputs {
+            id
+            label
+          }
+        }
+        ... on GfFieldWithConditionalLogicSetting {
+          conditionalLogic {
+            actionType
+            logicType
+            rules {
+              fieldId
+              operator
+              value
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+  `;
+
+  const fetchForm = () => {
+    console.log("Making GraphQL request:", {
+      url: config.public.wordpressUrl,
+      query: formQuery,
+    });
+
+    const { data, status, fetchError, execute, refresh } = useFetch(
+      config.public.wordpressUrl,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          query: formQuery,
+          variables: { formId: "1" },
+        }),
+        immediate: false,
+        transform: (res) => {
+          if (res.errors) {
+            console.error("GraphQL Errors:", res.errors);
+            throw new Error(res.errors[0].message);
+          }
+          const fields = res.data?.gfForm?.formFields?.nodes;
+          if (!Array.isArray(fields)) {
+            console.error("Invalid fields data:", res.data);
+            throw new Error("Invalid form fields data");
+          }
+          return fields;
+        },
+      }
+    );
+
+    return { data, status, fetchError, execute, refresh };
+  };
+
+  const transformFieldValue = (field, value) => {
+    if (!field) return null;
+    const fieldId = parseInt(field.databaseId, 10);
+    switch (field.type) {
+      case "CHECKBOX":
+        if (!Array.isArray(value) || !value.length) return null;
+        return {
+          id: fieldId,
+          checkboxValues: value.map((val, index) => ({
+            inputId: parseFloat(`${fieldId}.${index + 1}`),
+            value: val,
+          })),
+        };
+      case "ADDRESS":
+        return {
+          id: fieldId,
+          addressValues: {
+            street: value?.street || "",
+            lineTwo: value?.lineTwo || "",
+            city: value?.city || "",
+            state: value?.state || "",
+            zip: value?.zip || "",
+            country: value?.country || "US",
+          },
+        };
+      case "EMAIL":
+        return {
+          id: fieldId,
+          emailValues: {
+            value: value || "",
+            confirmationValue: value || "",
+          },
+        };
+      case "NAME":
+        return {
+          id: fieldId,
+          nameValues: {
+            prefix: value?.prefix || "",
+            first: value?.first || "",
+            middle: value?.middle || "",
+            last: value?.last || "",
+            suffix: value?.suffix || "",
+          },
+        };
+      case "MULTISELECT":
+      case "POST_CATEGORY":
+      case "POST_CUSTOM":
+      case "POST_TAGS":
+        return {
+          id: fieldId,
+          values: Array.isArray(value) ? value : [],
+        };
+      default:
+        return {
+          id: fieldId,
+          value: value?.toString() || "",
+        };
+    }
+  };
+
+  const submitForm = async (formId, fieldValues) => {
+    try {
+      const transformedValues = Object.entries(fieldValues)
+        .map(([id, value]) => {
+          const field = formFields.value.find(
+            (f) => f.databaseId === parseInt(id, 10)
+          );
+          if (!field) {
+            console.warn(`No field found for ID ${id}`);
+            return null;
+          }
+          return transformFieldValue(field, value);
+        })
+        .filter(Boolean);
+
+      const mutation = `
+        mutation SubmitForm($formId: ID!, $fieldValues: [FormFieldValuesInput!]!) {
+          submitGfForm(input: {
+            id: $formId
+            fieldValues: $fieldValues
+          }) {
+            errors {
+              id
+              message
+            }
+            confirmation {
+              message
+              type
+            }
+            entry {
+              id
+              ... on GfSubmittedEntry {
+                databaseId
+              }
+            }
+          }
+        }
+      `;
+
+      const response = await fetch(config.public.wordpressUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          query: mutation,
+          variables: {
+            formId: parseInt(formId, 10),
+            fieldValues: transformedValues,
+          },
+        }),
+      });
+
+      const result = await response.json();
+
+      if (result.errors) {
+        throw new Error(result.errors.map((e) => e.message).join(", "));
+      }
+
+      return result.data.submitGfForm;
+    } catch (error) {
+      console.error("Submit form error:", error);
+      throw error;
+    }
+  };
+
+  return { formFields, fetchForm, submitForm };
+}
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/layouts/default.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/layouts/default.vue
new file mode 100644
index 00000000..d300a606
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/layouts/default.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <header class="shadow-sm bg-white">
+      <nav class="container mx-auto p-4 flex justify-between">
+        <NuxtLink to="/" class="font-bold">Nuxt Headless WP Demo</NuxtLink>
+        <ul class="flex gap-4">
+          <li><NuxtLink to="/">Home</NuxtLink></li>
+          <li><NuxtLink to="/wpblog">blog</NuxtLink></li>
+
+          <li><NuxtLink to="/questionnaire">Questionnaire</NuxtLink></li>
+          <li><NuxtLink to="/products" class="btn">products</NuxtLink></li>
+        </ul>
+      </nav>
+    </header>
+    <div class="container mx-auto p-4">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.router-link-exact-active {
+  color: #12b488;
+}
+</style>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/layouts/products.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/layouts/products.vue
new file mode 100644
index 00000000..464f24ee
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/layouts/products.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <header class="shadow-sm bg-white">
+      <nav class="container mx-auto p-4">
+        <NuxtLink to="/" class="font-bold">Nuxt Headless WP Demo</NuxtLink>
+      </nav>
+    </header>
+    <div class="container mx-auto p-4">
+      <slot />
+    </div>
+    <footer class="container mx-auto p-4 flex justify-between border-t-2">
+      <ul class="flex gap-4">
+        <li><NuxtLink to="/">Home</NuxtLink></li>
+        <li><NuxtLink to="/about">about</NuxtLink></li>
+        <li><NuxtLink to="/products">products</NuxtLink></li>
+      </ul>
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.router-link-exact-active {
+  color: #12b488;
+}
+</style>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/nuxt.config.ts b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/nuxt.config.ts
new file mode 100644
index 00000000..e926da8f
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/nuxt.config.ts
@@ -0,0 +1,19 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: "2024-11-01",
+  devtools: { enabled: true },
+  modules: ["@nuxtjs/tailwindcss"],
+  runtimeConfig: {
+    public: {
+      wordpressUrl: "",
+    },
+  },
+  routeRules: {
+    // Blog listing page - revalidates every 60 seconds
+    "/wpblog": { isr: 60 },
+    // Individual blog posts - cached until next deployment
+    "/wpblog/**": { isr: true },
+    // Pre-render the form page at build time
+    "/headlesswp-gform": { prerender: true },
+  },
+});
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/package.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/package.json
new file mode 100644
index 00000000..652f48ea
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "start": "nuxt start"
+  },
+  "dependencies": {
+    "graphql": "^16.10.0",
+    "nuxt": "^3.16.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.13.2"
+  },
+  "engines": {
+    "node": ">=18.19.0"
+  }
+}
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/index.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/index.vue
new file mode 100644
index 00000000..21784369
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <h2>Headless WordPress Demo with Nuxt.js and WPGraphQL</h2>
+    <p>
+      Welcome to our demo showcasing the integration of various technologies in
+      a headless WordPress setup. Here's what you can expect:
+    </p>
+    <ul>
+      <li><strong>WPGraphQL</strong> and Headless WordPress for the blog.</li>
+      <li><strong>REST API</strong> for the products pages.</li>
+      <li>
+        <strong>WPGraphQL</strong> for Gravity Forms in headless WordPress for
+        the Questionnaire.
+      </li>
+      <li><strong>Nuxt.js</strong> for the frontend framework.</li>
+    </ul>
+    <p>
+      Explore the features and see how these technologies work together to
+      create a seamless experience!
+    </p>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped>
+h2 {
+  margin-bottom: 20px;
+  font-size: 36px;
+}
+
+p {
+  margin: 20px 0;
+  font-size: 18px;
+}
+
+ul {
+  margin: 20px 0;
+  padding-left: 20px;
+  list-style-type: disc;
+}
+
+li {
+  font-size: 18px;
+}
+</style>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/products/[id].vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/products/[id].vue
new file mode 100644
index 00000000..20db8d97
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/products/[id].vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <ProductDetails :product="product" />
+  </div>
+</template>
+
+<script setup>
+const { id } = useRoute().params;
+const uri = "https://fakestoreapi.com/products/" + id;
+
+//  fetch the products
+const { data: product } = await useFetch(uri, { key: id });
+
+definePageMeta({
+  layout: "products",
+});
+</script>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/products/index.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/products/index.vue
new file mode 100644
index 00000000..b571091e
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/products/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div class="grid grid-cols-4 gap-5">
+      <div v-for="p in products" :key="p.id">
+        <ProductCard :product="p" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ProductCard from "~/components/product/ProductCard.vue";
+
+// Fetch the products
+const { data: products } = await useFetch("https://fakestoreapi.com/products");
+
+definePageMeta({
+  layout: "products",
+});
+</script>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/questionnaire/index.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/questionnaire/index.vue
new file mode 100644
index 00000000..98a510aa
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/questionnaire/index.vue
@@ -0,0 +1,278 @@
+<script setup>
+import { ref, reactive, onMounted, watch } from "vue";
+
+import {
+  InputField,
+  DropdownField,
+  ChoiceListField,
+  AddressField,
+  DateField,
+  TimeField,
+  NameField,
+  PhoneField,
+} from "~/components/form-fields";
+
+import EmailFieldComponent from "~/components/form-fields/EmailField.vue";
+
+import useGravityForm from "~/composables/useGravityForm";
+const { fetchForm, submitForm, formFields } = useGravityForm();
+
+const formValues = ref({});
+const error = ref(null);
+
+const validationErrors = reactive({
+  address: {
+    street: null,
+    city: null,
+    state: null,
+    zip: null,
+    country: null,
+  },
+  email: null,
+});
+
+// Validate the entire address object and update errors per field.
+const validateAddress = (address) => {
+  let valid = true;
+  if (!address.street) {
+    validationErrors.address.street = "Street address is required.";
+    valid = false;
+  } else {
+    validationErrors.address.street = null;
+  }
+  if (!address.city) {
+    validationErrors.address.city = "City is required.";
+    valid = false;
+  } else {
+    validationErrors.address.city = null;
+  }
+  if (!address.state) {
+    validationErrors.address.state = "State is required.";
+    valid = false;
+  } else {
+    validationErrors.address.state = null;
+  }
+  if (!address.zip || !/^\d{5}$/.test(address.zip)) {
+    validationErrors.address.zip = "Please enter a valid 5-digit ZIP code.";
+    valid = false;
+  } else {
+    validationErrors.address.zip = null;
+  }
+  if (!address.country) {
+    validationErrors.address.country = "Country is required.";
+    valid = false;
+  } else {
+    validationErrors.address.country = null;
+  }
+  return valid;
+};
+
+// Validate the email value and update the error.
+const validateEmail = (email) => {
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  if (!emailRegex.test(email)) {
+    validationErrors.email = "Please enter a valid email address.";
+    return false;
+  }
+  validationErrors.email = null;
+  return true;
+};
+
+// Handle field value updates
+const updateFieldValue = (fieldId, value) => {
+  formValues.value = {
+    ...formValues.value,
+    [fieldId]: value,
+  };
+};
+
+onMounted(() => {
+  const { data, error: fetchError, execute } = fetchForm();
+  execute();
+
+  watch(data, (newData) => {
+    if (newData && Array.isArray(newData)) {
+      formFields.value = newData;
+      const initialValues = {};
+      newData.forEach((field) => {
+        switch (field.type) {
+          case "ADDRESS":
+            initialValues[field.databaseId] = {
+              street: "",
+              lineTwo: "",
+              city: "",
+              state: "",
+              zip: "",
+              country: "US",
+            };
+            break;
+          case "CHECKBOX":
+          case "MULTISELECT":
+            initialValues[field.databaseId] = [];
+            break;
+          case "NAME":
+            initialValues[field.databaseId] = {
+              prefix: "",
+              first: "",
+              middle: "",
+              last: "",
+              suffix: "",
+            };
+            break;
+          default:
+            initialValues[field.databaseId] = "";
+        }
+      });
+      formValues.value = initialValues;
+    }
+  });
+
+  watch(fetchError, (err) => {
+    if (err) {
+      error.value = err.message;
+    }
+  });
+});
+
+const handleSubmit = async () => {
+  let isValid = true;
+
+  // Validate email field before submission
+  const emailField = formFields.value.find((field) => field.type === "EMAIL");
+  if (emailField && formValues.value[emailField.databaseId]) {
+    if (!validateEmail(formValues.value[emailField.databaseId])) {
+      isValid = false;
+    }
+  }
+
+  // Validate address field before submission
+  const addressField = formFields.value.find(
+    (field) => field.type === "ADDRESS"
+  );
+  if (addressField && formValues.value[addressField.databaseId]) {
+    if (!validateAddress(formValues.value[addressField.databaseId])) {
+      isValid = false;
+    }
+  }
+
+  if (!isValid) {
+    alert("Please fix the errors before submitting.");
+    return;
+  }
+
+  try {
+    const response = await submitForm(1, formValues.value);
+    if (response?.errors?.length > 0) {
+      throw new Error(response.errors[0].message);
+    }
+    if (response?.confirmation) {
+      const temp = document.createElement("div");
+      temp.innerHTML = response.confirmation.message;
+      const cleanMessage = temp.textContent || temp.innerText;
+      alert(cleanMessage);
+
+      // Reset fields after submission
+      const resetValues = {};
+      formFields.value.forEach((field) => {
+        switch (field.type) {
+          case "ADDRESS":
+            resetValues[field.databaseId] = {
+              street: "",
+              lineTwo: "",
+              city: "",
+              state: "",
+              zip: "",
+              country: "US",
+            };
+            break;
+          case "CHECKBOX":
+          case "MULTISELECT":
+            resetValues[field.databaseId] = [];
+            break;
+          case "NAME":
+            resetValues[field.databaseId] = {
+              prefix: "",
+              first: "",
+              middle: "",
+              last: "",
+              suffix: "",
+            };
+            break;
+          default:
+            resetValues[field.databaseId] = "";
+        }
+      });
+      formValues.value = resetValues;
+    }
+  } catch (err) {
+    alert(`Error submitting form: ${err.message}`);
+  }
+};
+
+// Map field types to components using barrel file imports.
+const fieldComponents = {
+  TEXT: InputField,
+  EMAIL: EmailFieldComponent,
+  TEXTAREA: InputField,
+  SELECT: DropdownField,
+  MULTISELECT: DropdownField,
+  CHECKBOX: ChoiceListField,
+  RADIO: ChoiceListField,
+  ADDRESS: AddressField,
+  DATE: DateField,
+  TIME: TimeField,
+  NAME: NameField,
+  WEBSITE: InputField,
+  PHONE: PhoneField,
+};
+</script>
+
+<template>
+  <div class="p-4">
+    <!-- Global error message -->
+    <div v-if="error">
+      <p class="text-red-600">Error: {{ error }}</p>
+    </div>
+    <div v-else-if="!formFields.length">
+      <p>Loading form...</p>
+    </div>
+    <form v-else @submit.prevent="handleSubmit">
+      <div v-for="field in formFields" :key="field.databaseId" class="mb-4">
+        <component
+          :is="fieldComponents[field.type]"
+          :field="field"
+          :model-value="formValues[field.databaseId]"
+          @update:model-value="
+            (newValue) => updateFieldValue(field.databaseId, newValue)
+          "
+          :validation-errors="validationErrors"
+          :validate-email="validateEmail"
+          :validate-address="validateAddress"
+        />
+      </div>
+
+      <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">
+        Submit
+      </button>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+}
+</style>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/wpblog/[...uri].vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/wpblog/[...uri].vue
new file mode 100644
index 00000000..16b3d4d4
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/wpblog/[...uri].vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <TheHeader></TheHeader>
+    <main class="bg-gray-100 container mx-auto mt-6 p-6 rounded-lg">
+      <h1 class="text-4xl">{{ data.title }}</h1>
+      <div class="text-2xl mt-4">
+        {{ new Date(data.date).toLocaleDateString() }}
+      </div>
+      <article class="mt-4 space-y-2" v-html="data.content"></article>
+    </main>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute();
+const uri = route.params.uri.join("/");
+const config = useRuntimeConfig();
+const { data, pending, refresh, error } = await useFetch(
+  config.public.wordpressUrl,
+  {
+    method: "get",
+    query: {
+      query: `
+      query MyQuery3($uri: String!) {
+          nodeByUri(uri: $uri) {
+              ... on Post {
+                  id
+                  title
+                  date
+                  content
+              }
+          }
+      }
+      `,
+      variables: {
+        uri: uri,
+      },
+    },
+    transform(data) {
+      return data.data.nodeByUri;
+    },
+  }
+);
+
+useHead({
+  title: data.value.title,
+});
+</script>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/wpblog/index.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/wpblog/index.vue
new file mode 100644
index 00000000..bf0ee4ea
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/pages/wpblog/index.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { ref } from "vue";
+import Post from "~/components/wp/Post.vue";
+import TheHeader from "~/components/wp/TheHeader.vue";
+
+const config = useRuntimeConfig();
+const error = ref(null);
+
+const query = `
+  query {
+    posts {
+      nodes {
+        title
+        date
+        excerpt
+        uri
+      }
+    }
+  }
+`;
+
+const { data, pending } = await useFetch(
+  `${config.public.wordpressUrl}?query=${encodeURIComponent(query)}`,
+  {
+    method: "GET",
+    transform: (response) => response?.data?.posts?.nodes || [],
+  }
+);
+</script>
+
+<template>
+  <div>
+    <TheHeader />
+    <div class="grid gap-8 grid-cols-1 lg:grid-cols-3 p-6">
+      <template v-if="!pending && data">
+        <Post v-for="post in data" :key="post.uri" :post="post" />
+      </template>
+      <div v-else-if="error" class="text-red-500">Error: {{ error }}</div>
+      <div v-else>Loading...</div>
+    </div>
+  </div>
+</template>
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/public/favicon.ico b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/public/favicon.ico
new file mode 100644
index 00000000..18993ad9
Binary files /dev/null and b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/public/favicon.ico differ
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/public/robots.txt b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/public/robots.txt
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/public/robots.txt
@@ -0,0 +1 @@
+
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/server/tsconfig.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/server/tsconfig.json
new file mode 100644
index 00000000..b9ed69c1
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/tsconfig.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/tsconfig.json
new file mode 100644
index 00000000..a746f2a7
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/example-app/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json
new file mode 100644
index 00000000..aaa73dce
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "headlesswp-gravity-forms-nuxt-env",
+  "version": "1.0.0",
+  "scripts": {
+    "example:build": "npm run frontend:install && npm run frontend:dev && npm run wp:start && npm run wp:db:import && npm run frontend:dev",
+    "wp:start": "wp-env start",
+    "wp:stop": "wp-env stop",
+    "wp:destroy": "wp-env destroy --config .wp-env.json",
+    "wp:db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql",
+    "wp:db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql",
+    "frontend:install": "npm --prefix example-app/ install",
+    "frontend:dev": "npm --prefix example-app/ dev",
+    "start": "npm run wp:start && npm run frontend:dev"
+  },
+  "devDependencies": {
+    "@wordpress/env": "^10.20.0"
+  }
+}
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/wp-env/setup/.htaccess b/examples/nuxt/nuxt-headlesswp-gravity-forms/wp-env/setup/.htaccess
new file mode 100644
index 00000000..ad8663f5
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/wp-env/setup/.htaccess
@@ -0,0 +1,21 @@
+<IfModule mod_headers.c>
+    Header set Access-Control-Allow-Origin "*"
+    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
+    Header set Access-Control-Allow-Headers "Authorization, Content-Type"
+</IfModule>
+
+# BEGIN WordPress
+# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
+# dynamically generated, and should only be modified via WordPress filters.
+# Any changes to the directives between these markers will be overwritten.
+<IfModule mod_rewrite.c>
+RewriteEngine On
+RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
+RewriteBase /
+RewriteRule ^index\.php$ - [L]
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . /index.php [L]
+</IfModule>
+
+# END WordPress
\ No newline at end of file