{"id":14276,"library":"vue-dog-form","title":"Vue Dog Form - Simple Vue 3 Form Validation","description":"Vue Dog Form is a lightweight (under 3kb gzipped) and flexible form validation plugin designed exclusively for Vue 3 applications. Its current stable version is 3.0.0. It differentiates itself by avoiding schema objects, instead utilizing native HTML-like validation attributes directly on its `<DError>` component, making validation declarations intuitive and co-located with the input. The plugin is compatible with any custom input components and supports custom validation rules and messages. Version 3.0.0 introduced full TypeScript support, an auto-revalidate feature for custom rules, and disabled the browser's native form validation by default, streamlining the developer experience. The release cadence appears to be feature-driven, with significant rewrites in major versions like v2 (Composition API) and v3 (TypeScript and default behavior changes).","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/yklim9938/vue-dog-form","tags":["javascript","vue","form","validation","typescript"],"install":[{"cmd":"npm install vue-dog-form","lang":"bash","label":"npm"},{"cmd":"yarn add vue-dog-form","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-dog-form","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is the default export used as a Vue plugin. It is not a named export.","wrong":"import { dogForm } from 'vue-dog-form'","symbol":"dogForm","correct":"import dogForm from 'vue-dog-form'"},{"note":"The <DForm> component is automatically available globally after installing the plugin. Importing it directly is for explicit component registration or IDE type inference.","symbol":"DForm","correct":"import { DForm } from 'vue-dog-form'"},{"note":"The <DError> component is automatically available globally after installing the plugin. Importing it directly is for explicit component registration or IDE type inference.","symbol":"DError","correct":"import { DError } from 'vue-dog-form'"},{"note":"DogSubmitEvent is a type for the event object passed to the @submit handler of <DForm>, primarily used for TypeScript.","wrong":"import { DogSubmitEvent } from 'vue-dog-form'","symbol":"DogSubmitEvent","correct":"import type { DogSubmitEvent } from 'vue-dog-form'"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport App from './App.vue'\nimport dogForm from 'vue-dog-form'\nimport type { DogSubmitEvent } from 'vue-dog-form'\n\nconst app = createApp(App)\napp.use(dogForm)\napp.mount('#app')\n\n// src/App.vue\n<template>\n    <DForm @submit=\"submitHandler\">\n        <div>\n            <label for=\"name-input\">Name</label>\n            <input id=\"name-input\" type=\"text\" v-model=\"name\">\n            <DError v-model=\"name\" required minlength=\"3\"/>\n        </div>\n        <div>\n            <label for=\"password-input\">Password</label>\n            <input id=\"password-input\" type=\"password\" v-model=\"password\">\n            <DError v-model=\"password\" required/>\n        </div>\n        <button type=\"submit\">Submit</button>\n    </DForm>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst name = ref('')\nconst password = ref('')\n\nconst submitHandler = (e: DogSubmitEvent) => {\n    // e.preventDefault() is handled automatically by DForm\n    if (!e.isValid) {\n        console.log('Form is invalid!')\n        return // stop if form is not valid\n    }\n    console.log('Form is valid!', { name: name.value, password: password.value })\n    // Proceed with form submission logic (e.g., API call)\n}\n</script>","lang":"typescript","description":"This quickstart demonstrates how to install Vue Dog Form as a Vue plugin, wrap a form with <DForm>, and use <DError> components for declarative validation with `v-model` and native-like attributes. It includes a basic submit handler with TypeScript typing."},"warnings":[{"fix":"To re-enable native validation, add `native-validate=\"true\"` to your `<DForm>` component: `<DForm native-validate=\"true\" @submit=\"submitHandler\">`.","message":"Since v3.0.0, browser's native form validation (`e.preventDefault()`, default validation UI) is disabled by default within <DForm>. If you rely on native validation, you must explicitly enable the `native-validate` prop on <DForm>.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Add CSS rules for the `._df_ErrMsg` class (e.g., `._df_ErrMsg { color: red; font-size: 0.8em; margin-top: 5px; }`) in your component styles or global stylesheet.","message":"Vue Dog Form error messages come with no default styling. You must apply custom CSS to the `._df_ErrMsg` class to make error messages visible or match your application's design.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review any custom logic interacting with the plugin's internals if upgrading from v1.x. The primary public API usage remains the same, but internal access patterns would need adjustment.","message":"Version 2.0.0 involved a significant rewrite using Vue 3's Composition API. While the public API components (<DForm>, <DError>) remained largely consistent, any internal customization or direct manipulation of pre-v2 internals might be broken.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Remove any explicit `e.preventDefault()` calls from your `<DForm>` submit handlers. Focus solely on your validation and data processing logic.","message":"When handling form submissions with `<DForm>`, you do not need to call `e.preventDefault()` within your `@submit` handler. The `<DForm>` component automatically prevents the default browser form submission action.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'3':6,27 '3.0.0':34,82 '3kb':16 'api':127 'appear':112 'applic':28 'attribut':49 'auto':89 'auto-revalid':88 'avoid':39 'behavior':133 'browser':98 'cadenc':111 'chang':134 'co':60 'co-loc':59 'compat':68 'compon':53,73 'composit':126 'current':30 'custom':71,76,93 'declar':56 'default':104,132 'design':23 'develop':107 'differenti':36 'direct':50 'disabl':96 'dog':2,10 'driven':117 'exclus':24 'experi':108 'featur':91,116 'feature-driven':115 'flexibl':19 'form':3,7,11,20,101,137 'full':84 'gzip':17 'html':46 'html-like':45 'input':64,72 'instead':42 'introduc':83 'intuit':57 'javascript':135 'lightweight':14 'like':47,124 'locat':61 'major':122 'make':54 'messag':80 'nativ':44,100 'object':41 'plugin':22,66 'releas':110 'revalid':90 'rewrit':120 'rule':78,94 'schema':40 'signific':119 'simpl':4 'stabl':31 'streamlin':105 'support':75,86 'typescript':85,130,139 'util':43 'v2':125 'v3':129 'valid':8,21,48,55,77,102,138 'version':32,81,123 'vue':1,5,9,26,136","created_at":"2026-04-20T01:58:52.128298+00:00","updated_at":"2026-04-20T01:58:52.128298+00:00","problems":[{"fix":"Ensure you have `import dogForm from 'vue-dog-form'` and `app.use(dogForm)` in your `main.js` or Nuxt plugin file.","cause":"The `dogForm` plugin was not imported or was not correctly passed to `app.use()` in your main application file.","error":"TypeError: Cannot read properties of undefined (reading 'use')"},{"fix":"Verify that `app.use(dogForm)` is executed before mounting your Vue application. For Nuxt 3, ensure the plugin file is correctly set up in the `plugins` directory and exports `defineNuxtPlugin`.","cause":"The `dogForm` plugin was not correctly installed using `app.use()`, or the components are not globally registered.","error":"[Vue warn]: Failed to resolve component: DForm"},{"fix":"Import `DogSubmitEvent` and type your event parameter: `import type { DogSubmitEvent } from 'vue-dog-form'; const submitHandler = (e: DogSubmitEvent) => { ... }`.","cause":"You are using TypeScript and the `e` parameter in your `@submit` handler is not typed as `DogSubmitEvent`.","error":"Property 'isValid' does not exist on type 'Event'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/yklim9938/vue-dog-form","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-dog-form","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}