vue-dog-form

library3.0.0jsnpmunverified

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).

web-framework

npm install vue-dog-form

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-DOG-FORM

vue-dog-form

web-frameworkjavascriptv3.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

dogForm

✓ import dogForm from 'vue-dog-form'

✗ import { dogForm } from 'vue-dog-form'

This is the default export used as a Vue plugin. It is not a named export.

DForm

✓ import { DForm } from 'vue-dog-form'

The <DForm> component is automatically available globally after installing the plugin. Importing it directly is for explicit component registration or IDE type inference.

DError

✓ import { DError } from 'vue-dog-form'

The <DError> component is automatically available globally after installing the plugin. Importing it directly is for explicit component registration or IDE type inference.

DogSubmitEvent

✓ import type { DogSubmitEvent } from 'vue-dog-form'

✗ import { DogSubmitEvent } from 'vue-dog-form'

DogSubmitEvent is a type for the event object passed to the @submit handler of <DForm>, primarily used for TypeScript.

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.

import { createApp } from 'vue' import App from './App.vue' import dogForm from 'vue-dog-form' import type { DogSubmitEvent } from 'vue-dog-form' const app = createApp(App) app.use(dogForm) app.mount('#app') // src/App.vue <template> <DForm @submit="submitHandler"> <div> <label for="name-input">Name</label> <input id="name-input" type="text" v-model="name"> <DError v-model="name" required minlength="3"/> </div> <div> <label for="password-input">Password</label> <input id="password-input" type="password" v-model="password"> <DError v-model="password" required/> </div> <button type="submit">Submit</button> </DForm> </template> <script setup lang="ts"> import { ref } from 'vue' const name = ref('') const password = ref('') const submitHandler = (e: DogSubmitEvent) => { // e.preventDefault() is handled automatically by DForm if (!e.isValid) { console.log('Form is invalid!') return // stop if form is not valid } console.log('Form is valid!', { name: name.value, password: password.value }) // Proceed with form submission logic (e.g., API call) } </script>

Debug

Known issues

breakingSince 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>.

fix

To re-enable native validation, add `native-validate="true"` to your `<DForm>` component: `<DForm native-validate="true" @submit="submitHandler">`.

affects: >=3.0.0

gotchaVue 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.

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.

affects: >=1.0.0

breakingVersion 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.

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.

affects: >=2.0.0

gotchaWhen 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.

fix

Remove any explicit `e.preventDefault()` calls from your `<DForm>` submit handlers. Focus solely on your validation and data processing logic.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'use')

The `dogForm` plugin was not imported or was not correctly passed to `app.use()` in your main application file.

fix

Ensure you have `import dogForm from 'vue-dog-form'` and `app.use(dogForm)` in your `main.js` or Nuxt plugin file.

[Vue warn]: Failed to resolve component: DForm

The `dogForm` plugin was not correctly installed using `app.use()`, or the components are not globally registered.

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`.

Property 'isValid' does not exist on type 'Event'.

You are using TypeScript and the `e` parameter in your `@submit` handler is not typed as `DogSubmitEvent`.

fix

Import `DogSubmitEvent` and type your event parameter: `import type { DogSubmitEvent } from 'vue-dog-form'; const submitHandler = (e: DogSubmitEvent) => { ... }`.

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/yklim9938/vue-dog-form ↗

packagehttps://www.npmjs.com/package/vue-dog-form ↗