skills.rest
cpvasques
cpvasquesCOMMUNITY
Explore all skills by this author →
GitHub

vue3-forms-validation

Automate Vue 3 form validation with VeeValidate and Zod schemas.

4|Updated Nov 17, 2023
Search Tags:#validation#vue#zod#forms#i18n#typing#veevalidate
One-click install
npx skills add https://github.com/cpvasques/vue-template --skill vue3-forms-validation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue3-forms-validation
Source: https://github.com/cpvasques/vue-template/tree/main/.cursor/skills/vue3-forms-validation
Command: npx skills add https://github.com/cpvasques/vue-template --skill vue3-forms-validation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Este Skill facilita a padronização e aceleração do desenvolvimento de formulários em Vue 3, integrando validação com VeeValidate e Zod, com suporte a i18n.

Core Features & Use Cases

  • Integração VeeValidate + Zod com schemas tipados via toTypedSchema
  • i18n com zod-i18n-map para mensagens de erro traduzidas
  • Feedback visual inline de erros + toast para submissão
  • Reutilização de componentes UI em @/shared/components/
  • Cenários de uso: criação de novos formulários, schemas de validação e integração com i18n

Quick Start

Crie um novo formulário definindo um schema Zod com toTypedSchema, conecte-o ao useForm do VeeValidate e vincule os inputs com componentField, validando antes de submeter.

Frequently Asked Questions about vue3-forms-validation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate VeeValidate with Zod for Vue 3 form validation?▼

You can standardize Vue 3 form validation by defining a Zod schema, converting it via toTypedSchema, and binding it to VeeValidate's useForm. This provides typed validation schemas and inline field error handling.

How does Zod validation handle i18n translated error messages?▼

Zod validation supports i18n translated error messages through zod-i18n-map integration. This maps native Zod error codes to localized strings, ensuring users receive translated inline field errors.

What is the best way to standardize form creation and validation across Vue 3 apps?▼

Standardizing Vue 3 form validation involves using VeeValidate with Zod schemas. This enforces consistent typed validation rules, inline visual error feedback, and toast notifications upon form submission.

Do I need to manually bind input fields when using VeeValidate and Zod?▼

No, manual input binding is unnecessary when using VeeValidate with Zod. You bind inputs using componentField connected to useForm, automatically linking UI components to the validation schema.

How do I display form submission feedback using toast notifications in Vue 3?▼

You display form submission feedback by triggering toast notifications after VeeValidate successfully validates the Zod schema. This provides immediate visual confirmation of the form submission result.

Can I reuse UI components for forms built with VeeValidate and Zod?▼

Yes, you can reuse UI components for forms built with VeeValidate and Zod by placing them in a shared components directory. This ensures consistent validation logic and visual feedback across your Vue 3 application.

Related Skills

Explore More Software Engineering Skills→
Bbeierle12Bbeierle12
8

form-vue

Create Vue 3 forms with VeeValidate and Zod schema validation.

Community
Intermediate
cole-robertsoncole-robertson
36

inertia-rails-forms

Build Inertia Rails forms with useForm for state, validation, and file uploads.

Community
Basic
verivendverivend

form-validation

Implement Vue.js form validation with VeeValidate 4 and Zod schemas.

Official
Intermediate
yacosta738yacosta738
48

zod-4

Automate Zod 4 schema validation patterns for TypeScript projects.

Community
Advanced