diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/.gitignore b/examples/nuxt/nuxt-headlesswp-gravity-forms/.gitignore
new file mode 100644
index 0000000..4a7f73a
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/.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/README.md b/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md
new file mode 100644
index 0000000..0287a36
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/assets/css/tailwind.css b/examples/nuxt/nuxt-headlesswp-gravity-forms/assets/css/tailwind.css
new file mode 100644
index 0000000..1565f44
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/form-fields/AddressField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/form-fields/AddressField.vue
new file mode 100644
index 0000000..db2037d
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/form-fields/ChoiceListField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/form-fields/ChoiceListField.vue
new file mode 100644
index 0000000..22bbaf5
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/form-fields/DateField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/form-fields/DateField.vue
new file mode 100644
index 0000000..cbe735a
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/form-fields/DropdownField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/form-fields/DropdownField.vue
new file mode 100644
index 0000000..3a5e62c
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/form-fields/EmailField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/form-fields/EmailField.vue
new file mode 100644
index 0000000..fbf1988
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/form-fields/InputField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/form-fields/InputField.vue
new file mode 100644
index 0000000..98be933
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/form-fields/NameField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/form-fields/NameField.vue
new file mode 100644
index 0000000..673d069
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/form-fields/PhoneField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/form-fields/PhoneField.vue
new file mode 100644
index 0000000..8d332ac
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/form-fields/TimeField.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/form-fields/TimeField.vue
new file mode 100644
index 0000000..8852241
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/form-fields/index.js b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/form-fields/index.js
new file mode 100644
index 0000000..f4493c9
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/product/ProductCard.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/product/ProductCard.vue
new file mode 100644
index 0000000..8763e67
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/product/ProductDetails.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/product/ProductDetails.vue
new file mode 100644
index 0000000..1d4139e
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/wp/Post.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/wp/Post.vue
new file mode 100644
index 0000000..d51f4f5
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/components/wp/TheHeader.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/components/wp/TheHeader.vue
new file mode 100644
index 0000000..88829ff
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/composables/useFormFields.js b/examples/nuxt/nuxt-headlesswp-gravity-forms/composables/useFormFields.js
new file mode 100644
index 0000000..a8ab0dd
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/composables/useGravityForm.js b/examples/nuxt/nuxt-headlesswp-gravity-forms/composables/useGravityForm.js
new file mode 100644
index 0000000..35c27e3
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/gforms-questionnaire.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/gforms-questionnaire.json
new file mode 100644
index 0000000..399a1f8
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/gforms-questionnaire.json
@@ -0,0 +1,927 @@
+{
+  "0": {
+    "title": "Questionnaire",
+    "description": "We want to know all about you! Please answer the questions below.",
+    "labelPlacement": "top_label",
+    "descriptionPlacement": "below",
+    "button": {
+      "type": "text",
+      "text": "Submit Questionnaire",
+      "imageUrl": ""
+    },
+    "fields": [
+      {
+        "type": "address",
+        "id": 7,
+        "label": "Address",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "addressType": "international",
+        "inputs": [
+          {
+            "id": "7.1",
+            "label": "Street Address",
+            "name": "",
+            "placeholder": "123 Main St."
+          },
+          { "id": "7.2", "label": "Address Line 2", "name": "" },
+          { "id": "7.3", "label": "City", "name": "" },
+          { "id": "7.4", "label": "State / Province", "name": "" },
+          { "id": "7.5", "label": "ZIP / Postal Code", "name": "" },
+          { "id": "7.6", "label": "Country", "name": "" }
+        ],
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "",
+        "cssClass": "my-cool-address-field",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "choices": "",
+        "conditionalLogic": "",
+        "defaultCountry": "",
+        "defaultProvince": "",
+        "productField": "",
+        "defaultState": "",
+        "enableCopyValuesOption": "",
+        "copyValuesOptionDefault": "",
+        "copyValuesOptionLabel": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "fields": "",
+        "displayOnly": "",
+        "enableAutocomplete": false,
+        "autocompleteAttribute": ""
+      },
+      {
+        "type": "checkbox",
+        "id": 8,
+        "label": "Which Ninja Turtles do you like?",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "choices": [
+          {
+            "text": "Leonardo",
+            "value": "leonardo",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "Donatello",
+            "value": "donatello",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "Raphael",
+            "value": "Raphael",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "Michelangelo",
+            "value": "michelangelo",
+            "isSelected": false,
+            "price": ""
+          }
+        ],
+        "inputs": [
+          { "id": "8.1", "label": "Leonardo", "name": "" },
+          { "id": "8.2", "label": "Donatello", "name": "" },
+          { "id": "8.3", "label": "Raphael", "name": "" },
+          { "id": "8.4", "label": "Michelangelo", "name": "" }
+        ],
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "",
+        "cssClass": "my-cool-checkboxes",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "conditionalLogic": "",
+        "productField": "",
+        "enableSelectAll": "",
+        "enablePrice": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "enableChoiceValue": true,
+        "fields": "",
+        "displayOnly": "",
+        "enableAutocomplete": false,
+        "autocompleteAttribute": "",
+        "checkboxLabel": ""
+      },
+      {
+        "type": "date",
+        "id": 3,
+        "label": "Date",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "inputs": null,
+        "dateType": "datepicker",
+        "calendarIconType": "none",
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "01/01/3000",
+        "cssClass": "my-cool-date-field",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "choices": "",
+        "conditionalLogic": "",
+        "calendarIconUrl": "",
+        "dateFormat": "",
+        "productField": "",
+        "fields": "",
+        "displayOnly": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "enableAutocomplete": false,
+        "autocompleteAttribute": "",
+        "checkboxLabel": ""
+      },
+      {
+        "type": "email",
+        "id": 9,
+        "label": "Email",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "inputs": null,
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "some.cool.cat@example.com",
+        "cssClass": "my-cool-email-field",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "choices": "",
+        "conditionalLogic": "",
+        "productField": "",
+        "emailConfirmEnabled": "",
+        "fields": "",
+        "displayOnly": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "enableAutocomplete": false,
+        "autocompleteAttribute": "",
+        "checkboxLabel": ""
+      },
+      {
+        "type": "multiselect",
+        "id": 10,
+        "label": "Scenarios in which you would eat green eggs and ham",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "storageType": "json",
+        "inputs": null,
+        "choices": [
+          {
+            "text": "In a house",
+            "value": "in_a_house",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "With a mouse",
+            "value": "with_a_mouse",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "In a box",
+            "value": "in_a_box",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "With a fox",
+            "value": "with_a_fox",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "In the rain",
+            "value": "in_the_rain",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "On a train",
+            "value": "on_a_train",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "In a boat",
+            "value": "in_a_boat",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "With a goat",
+            "value": "with_a_goat",
+            "isSelected": false,
+            "price": ""
+          }
+        ],
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "",
+        "cssClass": "my-cool-multiselect",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "conditionalLogic": "",
+        "enableEnhancedUI": false,
+        "productField": "",
+        "multiSelectSize": "",
+        "enablePrice": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "enableChoiceValue": true,
+        "fields": "",
+        "displayOnly": "",
+        "enableAutocomplete": false,
+        "autocompleteAttribute": "",
+        "checkboxLabel": ""
+      },
+      {
+        "type": "name",
+        "id": 6,
+        "label": "Name",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "nameFormat": "advanced",
+        "inputs": [
+          {
+            "id": "6.2",
+            "label": "Prefix",
+            "name": "",
+            "choices": [
+              {
+                "text": "Mr.",
+                "value": "Mr.",
+                "isSelected": false,
+                "price": ""
+              },
+              {
+                "text": "Mrs.",
+                "value": "Mrs.",
+                "isSelected": false,
+                "price": ""
+              },
+              {
+                "text": "Miss",
+                "value": "Miss",
+                "isSelected": false,
+                "price": ""
+              },
+              {
+                "text": "Ms.",
+                "value": "Ms.",
+                "isSelected": false,
+                "price": ""
+              },
+              {
+                "text": "Dr.",
+                "value": "Dr.",
+                "isSelected": false,
+                "price": ""
+              },
+              {
+                "text": "Prof.",
+                "value": "Prof.",
+                "isSelected": false,
+                "price": ""
+              },
+              {
+                "text": "Rev.",
+                "value": "Rev.",
+                "isSelected": false,
+                "price": ""
+              }
+            ],
+            "isHidden": false,
+            "inputType": "radio"
+          },
+          { "id": "6.3", "label": "First", "name": "" },
+          {
+            "id": "6.4",
+            "label": "Middle",
+            "name": "",
+            "isHidden": false,
+            "placeholder": "The name your parents include when you're in trouble"
+          },
+          { "id": "6.6", "label": "Last", "name": "" },
+          { "id": "6.8", "label": "Suffix", "name": "", "isHidden": false }
+        ],
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "",
+        "cssClass": "my-cool-name-field",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "choices": "",
+        "conditionalLogic": "",
+        "productField": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "fields": "",
+        "displayOnly": "",
+        "enableAutocomplete": false,
+        "autocompleteAttribute": "",
+        "checkboxLabel": ""
+      },
+      {
+        "type": "phone",
+        "id": 4,
+        "label": "Phone",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "inputs": null,
+        "phoneFormat": "standard",
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "123-456-7890",
+        "cssClass": "my-cool-phone-field",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "choices": "",
+        "conditionalLogic": "",
+        "productField": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "fields": "",
+        "displayOnly": "",
+        "enableAutocomplete": false,
+        "autocompleteAttribute": "",
+        "checkboxLabel": ""
+      },
+      {
+        "type": "radio",
+        "id": 5,
+        "label": "What kind of bear is best?",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "inputs": null,
+        "choices": [
+          {
+            "text": "Brown bear",
+            "value": "brown_bear",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "Black bear",
+            "value": "black_bear",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "Grizzly bear",
+            "value": "grizzly_bear",
+            "isSelected": false,
+            "price": ""
+          }
+        ],
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "",
+        "cssClass": "my-cool-radio-buttons",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "conditionalLogic": "",
+        "productField": "",
+        "enableOtherChoice": "",
+        "enablePrice": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "enableChoiceValue": true,
+        "fields": "",
+        "displayOnly": "",
+        "enableAutocomplete": false,
+        "autocompleteAttribute": "",
+        "checkboxLabel": ""
+      },
+      {
+        "type": "select",
+        "id": 11,
+        "label": "Which was the first Pok\u00e9mon you ever acquired?",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "inputs": null,
+        "choices": [
+          {
+            "text": "Squirtle",
+            "value": "squirtle",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "Charmander",
+            "value": "charmander",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "Bulbasaur",
+            "value": "bulbasaur",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "Pikachu",
+            "value": "pikachu",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "Other",
+            "value": "other",
+            "isSelected": false,
+            "price": ""
+          },
+          {
+            "text": "I've never acquired one :(",
+            "value": "none",
+            "isSelected": false,
+            "price": ""
+          }
+        ],
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "",
+        "cssClass": "my-cool-select-field",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "conditionalLogic": "",
+        "productField": "",
+        "enablePrice": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "enableChoiceValue": true,
+        "fields": "",
+        "displayOnly": "",
+        "enableAutocomplete": false,
+        "autocompleteAttribute": "",
+        "checkboxLabel": ""
+      },
+      {
+        "type": "textarea",
+        "id": 12,
+        "label": "How much wood would a woodchuck chuck if a woodchuck could chuck wood?",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "inputs": null,
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "",
+        "cssClass": "my-cool-textarea-field",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "choices": "",
+        "conditionalLogic": "",
+        "productField": "",
+        "form_id": "",
+        "useRichTextEditor": false,
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "fields": "",
+        "displayOnly": "",
+        "enableAutocomplete": false,
+        "autocompleteAttribute": "",
+        "checkboxLabel": ""
+      },
+      {
+        "type": "text",
+        "id": 13,
+        "label": "How dare you?",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "inputs": null,
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "This better be good...",
+        "cssClass": "my-cool-text-field",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "choices": "",
+        "conditionalLogic": "",
+        "productField": "",
+        "enablePasswordInput": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "fields": "",
+        "displayOnly": "",
+        "enableAutocomplete": false,
+        "autocompleteAttribute": "",
+        "checkboxLabel": ""
+      },
+      {
+        "type": "time",
+        "id": 2,
+        "label": "Time",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "inputs": [
+          { "id": "2.1", "label": "HH", "name": "" },
+          { "id": "2.2", "label": "MM", "name": "" },
+          { "id": "2.3", "label": "AM/PM", "name": "" }
+        ],
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "",
+        "cssClass": "my-cool-time-field",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "choices": "",
+        "conditionalLogic": "",
+        "timeFormat": "12",
+        "productField": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "fields": "",
+        "displayOnly": "",
+        "enableAutocomplete": false,
+        "autocompleteAttribute": "",
+        "checkboxLabel": ""
+      },
+      {
+        "type": "website",
+        "id": 14,
+        "label": "Website",
+        "adminLabel": "",
+        "isRequired": false,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "inputs": null,
+        "placeholder": "https://example.com",
+        "formId": "3",
+        "description": "",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": "",
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "cssClass": "my-cool-website-field",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "choices": "",
+        "conditionalLogic": "",
+        "productField": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "fields": "",
+        "displayOnly": "",
+        "autocompleteAttribute": "",
+        "enableAutocomplete": false,
+        "checkboxLabel": ""
+      },
+      {
+        "type": "text",
+        "id": 15,
+        "label": "Short Strings Only",
+        "adminLabel": "",
+        "isRequired": true,
+        "size": "medium",
+        "errorMessage": "",
+        "visibility": "visible",
+        "inputs": null,
+        "formId": "3",
+        "description": "Please enter 5 characters or less.",
+        "allowsPrepopulate": false,
+        "inputMask": false,
+        "inputMaskValue": "",
+        "inputMaskIsCustom": false,
+        "maxLength": 5,
+        "inputType": "",
+        "labelPlacement": "",
+        "descriptionPlacement": "",
+        "subLabelPlacement": "",
+        "placeholder": "",
+        "cssClass": "",
+        "inputName": "",
+        "noDuplicates": false,
+        "defaultValue": "",
+        "choices": "",
+        "conditionalLogic": "",
+        "productField": "",
+        "enablePasswordInput": "",
+        "fields": "",
+        "displayOnly": "",
+        "multipleFiles": false,
+        "maxFiles": "",
+        "calculationFormula": "",
+        "calculationRounding": "",
+        "enableCalculation": "",
+        "disableQuantity": false,
+        "displayAllCategories": false,
+        "useRichTextEditor": false,
+        "layoutGroupId": "79e7fd63",
+        "autocompleteAttribute": "",
+        "enableAutocomplete": false,
+        "errors": [],
+        "layoutGridColumnSpan": 12,
+        "checkboxLabel": ""
+      }
+    ],
+    "version": "2.5.0.1",
+    "id": "3",
+    "nextFieldId": 16,
+    "useCurrentUserAsAuthor": true,
+    "postContentTemplateEnabled": false,
+    "postTitleTemplateEnabled": false,
+    "postTitleTemplate": "",
+    "postContentTemplate": "",
+    "lastPageButton": null,
+    "pagination": null,
+    "firstPageCssClass": null,
+    "is_active": "1",
+    "date_created": "2021-04-29 11:24:48",
+    "is_trash": "0",
+    "subLabelPlacement": "below",
+    "cssClass": "",
+    "enableHoneypot": false,
+    "enableAnimation": false,
+    "save": {
+      "enabled": false,
+      "button": { "type": "link", "text": "Save and Continue Later" }
+    },
+    "limitEntries": false,
+    "limitEntriesCount": "",
+    "limitEntriesPeriod": "",
+    "limitEntriesMessage": "",
+    "scheduleForm": false,
+    "scheduleStart": "",
+    "scheduleStartHour": "",
+    "scheduleStartMinute": "",
+    "scheduleStartAmpm": "",
+    "scheduleEnd": "",
+    "scheduleEndHour": "",
+    "scheduleEndMinute": "",
+    "scheduleEndAmpm": "",
+    "schedulePendingMessage": "",
+    "scheduleMessage": "",
+    "requireLogin": false,
+    "requireLoginMessage": "",
+    "confirmations": [
+      {
+        "id": "608a97805a96d",
+        "name": "Default Confirmation",
+        "isDefault": true,
+        "type": "message",
+        "message": "Thanks for contacting us! We will get in touch with you shortly.",
+        "url": "",
+        "pageId": "",
+        "queryString": ""
+      }
+    ],
+    "notifications": [
+      {
+        "id": "608a97805a5b1",
+        "isActive": true,
+        "to": "{admin_email}",
+        "name": "Admin Notification",
+        "event": "form_submission",
+        "toType": "email",
+        "subject": "New submission from {form_title}",
+        "message": "{all_fields}"
+      }
+    ]
+  },
+  "version": "2.5.0.1"
+}
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/layouts/default.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/layouts/default.vue
new file mode 100644
index 0000000..d300a60
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/layouts/products.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/layouts/products.vue
new file mode 100644
index 0000000..464f24e
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/nuxt.config.ts b/examples/nuxt/nuxt-headlesswp-gravity-forms/nuxt.config.ts
new file mode 100644
index 0000000..e926da8
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/package.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json
new file mode 100644
index 0000000..652f48e
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/pages/index.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/pages/index.vue
new file mode 100644
index 0000000..2178436
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/pages/products/[id].vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/pages/products/[id].vue
new file mode 100644
index 0000000..20db8d9
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/pages/products/index.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/pages/products/index.vue
new file mode 100644
index 0000000..b571091
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/pages/questionnaire/index.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/pages/questionnaire/index.vue
new file mode 100644
index 0000000..98a510a
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/pages/wpblog/[...uri].vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/pages/wpblog/[...uri].vue
new file mode 100644
index 0000000..16b3d4d
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/pages/wpblog/index.vue b/examples/nuxt/nuxt-headlesswp-gravity-forms/pages/wpblog/index.vue
new file mode 100644
index 0000000..bf0ee4e
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/public/favicon.ico b/examples/nuxt/nuxt-headlesswp-gravity-forms/public/favicon.ico
new file mode 100644
index 0000000..18993ad
Binary files /dev/null and b/examples/nuxt/nuxt-headlesswp-gravity-forms/public/favicon.ico differ
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/public/robots.txt b/examples/nuxt/nuxt-headlesswp-gravity-forms/public/robots.txt
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/public/robots.txt
@@ -0,0 +1 @@
+
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/server/tsconfig.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/server/tsconfig.json
new file mode 100644
index 0000000..b9ed69c
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}
diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/tsconfig.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/tsconfig.json
new file mode 100644
index 0000000..a746f2a
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/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/wp-env/.wp-env.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/wp-env/.wp-env.json
new file mode 100644
index 0000000..810c6ed
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/wp-env/.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/wp-env/README.md b/examples/nuxt/nuxt-headlesswp-gravity-forms/wp-env/README.md
new file mode 100644
index 0000000..4539d75
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/wp-env/README.md
@@ -0,0 +1,106 @@
+# 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
+
+```
+├── components/           # Vue form-field components & barrel file
+├── composables/         # useGravityForm.js & useFormFields.js
+├── pages/              # Nuxt page (index.vue) that renders the form
+├── 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
+└── nuxt.config.ts      # Nuxt application config
+```
+
+## 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
+pnpm install
+
+echo "NUXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > .env
+```
+
+### Quick Start
+
+1. Unzip uploads, start WP, import DB, then launch Nuxt:
+
+   ```bash
+   pnpm example:build
+   ```
+
+2. Or run steps separately:
+
+   ```bash
+   # Start WP
+   pnpm wp:start
+
+   # Import DB
+   pnpm wp:db:import
+
+   # Unzip uploads
+   pnpm wp:images:unzip
+
+   # Start Nuxt dev server
+   pnpm 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                                                      |
+| ---------------------- | ---------------------------------------------------------------- |
+| `pnpm example:build`   | Unzip media → start WP env → import DB → launch Nuxt dev server  |
+| `pnpm example:start`   | Start WP env, then Nuxt dev server                               |
+| `pnpm example:stop`    | Stop the WordPress environment (wp-env stop)                     |
+| `pnpm example:prune`   | Destroy & rebuild the WP environment, then restart—all in one go |
+| `pnpm wp:start`        | @wordpress/env start (launches PHP/MySQL container with WP)      |
+| `pnpm wp:stop`         | @wordpress/env stop                                              |
+| `pnpm wp:db:import`    | Import the SQL dump into the running WP container                |
+| `pnpm wp:db:export`    | Export the current WP database back to wp-env/db/database.sql    |
+| `pnpm wp:images:unzip` | Clear & unzip wp-env/uploads.zip → populates wp-content/uploads  |
+| `pnpm dev`             | Start the Nuxt 3 development server on port 3000                 |
+
+> **Tip:** You can also run any arbitrary WP-CLI command inside the container via `pnpm 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/wp-env/package.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/wp-env/package.json
new file mode 100644
index 0000000..6c2b6f7
--- /dev/null
+++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/wp-env/package.json
@@ -0,0 +1,18 @@
+{
+    "name": "headlesswp-gravity-forms-nuxt-env",
+    "version": "1.0.0",
+    "scripts": {
+      "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",
+      "wp:images:unzip": "rm -rf ./wp-content/uploads && unzip uploads.zip -d wp-content/uploads",
+      "frontend:dev": "pnpm --prefix .. dev",
+      "start": "npm run wp:start && npm run frontend:dev"
+    },
+    "devDependencies": {
+      "@wordpress/env": "^10.20.0"
+    }
+  }
+  
\ No newline at end of file
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 0000000..ad8663f
--- /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