TanStack · crutchcorn · Apr 25, 2025 · Apr 25, 2025 · Apr 25, 2025
diff --git a/examples/vue/field-components/.gitignore b/examples/vue/field-components/.gitignore
@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
diff --git a/examples/vue/field-components/README.md b/examples/vue/field-components/README.md
@@ -0,0 +1,6 @@
+# Basic example
+
+To run this example:
+
+- `npm install` or `yarn` or `pnpm i`
+- `npm run dev` or `yarn dev` or `pnpm dev`
diff --git a/examples/vue/field-components/index.html b/examples/vue/field-components/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Form Vue Simple Example App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/field-components/package.json b/examples/vue/field-components/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@tanstack/form-example-vue-field-components",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build -m development",
+    "test:types": "vue-tsc",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/vue-form": "^1.6.3",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.3",
+    "typescript": "5.8.2",
+    "vite": "^6.3.2",
+    "vue-tsc": "^2.2.2"
+  }
+}
diff --git a/examples/vue/field-components/src/App.vue b/examples/vue/field-components/src/App.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { formOptions } from '@tanstack/vue-form'
+import { useAppForm } from './compositions/form'
+
+const peopleFormOpts = formOptions({
+  defaultValues: {
+    fullName: '',
+    email: '',
+    phone: '',
+    emergencyContact: {
+      fullName: '',
+      phone: '',
+    },
+  },
+})
+
+const form = useAppForm({
+  ...peopleFormOpts,
+  validators: {
+    onChange: ({ value }) => {
+      const errors = {
+        fields: {},
+      } as {
+        fields: Record<string, string>
+      }
+      if (!value.fullName) {
+        errors.fields.fullName = 'Full name is required'
+      }
+      if (!value.phone) {
+        errors.fields.phone = 'Phone is required'
+      }
+      if (!value.emergencyContact.fullName) {
+        errors.fields['emergencyContact.fullName'] =
+          'Emergency contact full name is required'
+      }
+      if (!value.emergencyContact.phone) {
+        errors.fields['emergencyContact.phone'] =
+          'Emergency contact phone is required'
+      }
+
+      return errors
+    },
+  },
+  onSubmit: ({ value }) => {
+    alert(JSON.stringify(value, null, 2))
+  },
+})
+</script>
+
+<template>
+  <form @submit.prevent.stop="form.handleSubmit()">
+    <h1>Personal Information</h1>
+    <form.AppField name="fullName" v-slot="{ field }">
+      <field.TextField label="Full Name" />
+    </form.AppField>
+    <form.AppField name="email" v-slot="{ field }">
+      <field.TextField label="Email" />
+    </form.AppField>
+    <form.AppField name="phone" v-slot="{ field }">
+      {{ JSON.stringify(field.TextField, null, 2) }}
+      <field.TextField label="Phone" />
+    </form.AppField>
+    <h2>Emergency Contact</h2>
+    <form.AppField name="emergencyContact.fullName" v-slot="{ field }">
+      <field.TextField label="Full Name" />
+    </form.AppField>
+    <form.AppField name="emergencyContact.phone" v-slot="{ field }">
+      <field.TextField label="Phone" />
+    </form.AppField>
+    <form.AppForm>
+      <form.SubscribeButton label="Submit" />
+    </form.AppForm>
+  </form>
+</template>
diff --git a/examples/vue/field-components/src/components/SubscribeButton.vue b/examples/vue/field-components/src/components/SubscribeButton.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { injectForm } from '../compositions/form-providers'
+
+const props = defineProps(['label'])
+
+const form = injectForm()
+</script>
+
+<template>
+  <form.Subscribe :selector="(state) => state.isSubmitting">
+    <template v-slot="isSubmitting">
+      <button :disabled="isSubmitting">{{ props.label }}</button>
+    </template>
+  </form.Subscribe>
+</template>
diff --git a/examples/vue/field-components/src/components/TextField.vue b/examples/vue/field-components/src/components/TextField.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useStore } from '@tanstack/vue-form'
+import { injectField } from '../compositions/form-providers'
+
+const props = defineProps(['label'])
+
+const field = injectField<string>()
+
+const errors = useStore(field.store, (state) => state.meta.errors)
+</script>
+
+<template>
+  <div>
+    <label>
+      <div>{{ props.label }}</div>
+      <input
+        :value="field.state.value"
+        @input="field.handleChange(($event as any).target.value)"
+      />
+    </label>
+    <div v-for="error in errors" :key="error" style="color: red">
+      {{ error }}
+    </div>
+  </div>
+</template>
diff --git a/examples/vue/field-components/src/compositions/form-providers.ts b/examples/vue/field-components/src/compositions/form-providers.ts
@@ -0,0 +1,4 @@
+import { createFormCompositionContexts } from '@tanstack/vue-form'
+
+export const { fieldProviderKey, injectField, formProviderKey, injectForm } =
+  createFormCompositionContexts()
diff --git a/examples/vue/field-components/src/compositions/form.ts b/examples/vue/field-components/src/compositions/form.ts
@@ -0,0 +1,15 @@
+import { createFormComposition } from '@tanstack/vue-form'
+import SubscribeButton from '../components/SubscribeButton.vue'
+import TextField from '../components/TextField.vue'
+import { fieldProviderKey, formProviderKey } from './form-providers.ts'
+
+export const { useAppForm } = createFormComposition({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldProviderKey,
+  formProviderKey,
+})
diff --git a/examples/vue/field-components/src/main.ts b/examples/vue/field-components/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/vue/field-components/src/shims-vue.d.ts b/examples/vue/field-components/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/vue/field-components/src/types.d.ts b/examples/vue/field-components/src/types.d.ts
@@ -0,0 +1,6 @@
+export interface Post {
+  userId: number
+  id: number
+  title: string
+  body: string
+}
diff --git a/examples/vue/field-components/tsconfig.json b/examples/vue/field-components/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
+}
diff --git a/examples/vue/field-components/vite.config.ts b/examples/vue/field-components/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  optimizeDeps: {
+    exclude: ['@tanstack/vue-form'],
+  },
+})