diff --git a/docs/.vitepress/config.cts b/docs/.vitepress/config.cts
index cf2c270..84eafcf 100644
--- a/docs/.vitepress/config.cts
+++ b/docs/.vitepress/config.cts
@@ -47,6 +47,7 @@ export default defineConfig({
},
{
text: 'Examples', collapsible: true, items: [
+ { text: 'Async submission', link: '/examples/async-submission' },
{ text: 'Async validations', link: '/examples/async-validations' },
{ text: 'Basic', link: '/examples/basic' },
{ text: 'Dependent fields', link: '/examples/dependent-fields' },
@@ -78,6 +79,6 @@ export default defineConfig({
{ text: `FormHandler`, link: '/api/form-handler' }
]
}
- ]
+ ],
}
})
\ No newline at end of file
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
new file mode 100644
index 0000000..894386c
--- /dev/null
+++ b/docs/.vitepress/theme/index.js
@@ -0,0 +1,10 @@
+import DefaultTheme from "vitepress/theme";
+import SandboxEmbedder from "../../components/SandboxEmbedder.vue";
+
+export default {
+ ...DefaultTheme,
+ enhanceApp(ctx) {
+ DefaultTheme.enhanceApp(ctx)
+ ctx.app.component('CodeExample', SandboxEmbedder)
+ }
+}
\ No newline at end of file
diff --git a/docs/components/SandboxEmbedder.vue b/docs/components/SandboxEmbedder.vue
new file mode 100644
index 0000000..89e41d9
--- /dev/null
+++ b/docs/components/SandboxEmbedder.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/examples/async-submission.md b/docs/examples/async-submission.md
new file mode 100644
index 0000000..6f5d9bc
--- /dev/null
+++ b/docs/examples/async-submission.md
@@ -0,0 +1,7 @@
+---
+description: This example shows how to use `async/await` to submit a form with VueFormHandler
+---
+# Async submission
+This example shows how to use `async/await` to submit a form with VueFormHandler
+
+
\ No newline at end of file
diff --git a/docs/examples/async-validations.md b/docs/examples/async-validations.md
index a8bb5bf..c43c19b 100644
--- a/docs/examples/async-validations.md
+++ b/docs/examples/async-validations.md
@@ -1 +1,8 @@
-# Async validations
\ No newline at end of file
+---
+description: This example shows how to make use of asynchronous validations
+---
+# Async validations
+
+This example shows how to make use of asynchronous validations
+
+
\ No newline at end of file
diff --git a/docs/examples/typescript.md b/docs/examples/typescript.md
index 721c965..c7f9265 100644
--- a/docs/examples/typescript.md
+++ b/docs/examples/typescript.md
@@ -1 +1,9 @@
-# Typescript
\ No newline at end of file
+---
+description: This example demonstrates how leverage typescript usage with the form handler.
+---
+
+# Typescript
+
+This example demonstrates how leverage typescript usage with the form handler.
+
+
\ No newline at end of file
diff --git a/docs/get-started/quick-start.md b/docs/get-started/quick-start.md
index e476ac9..fae0b48 100644
--- a/docs/get-started/quick-start.md
+++ b/docs/get-started/quick-start.md
@@ -262,10 +262,10 @@ const emailRegExp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
const { values, register, formState, handleSubmit } = useFormHandler({ validationMode: 'always' });
const successFn = (form: Record) => {
- console.log('Form correctly submitted:' form)
+ console.log('Form correctly submitted:', form)
}
-const errorFn = (errors: Record) => {
- console.error('There where errors while submitting the form:' errors)
+const errorFn = (errors: Record) => {
+ console.error('There where errors while submitting the form:', errors)
}
```
diff --git a/examples/async-submission/App.vue b/examples/async-submission/App.vue
new file mode 100644
index 0000000..4df97f5
--- /dev/null
+++ b/examples/async-submission/App.vue
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
+
diff --git a/examples/async-submission/README.md b/examples/async-submission/README.md
new file mode 100644
index 0000000..ef72fd5
--- /dev/null
+++ b/examples/async-submission/README.md
@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `
+
+