I’ve been searching the vuelidate-next (and vuelidate 0.x) documentation, github vuelidate repo (issues), and stackoverflow, but haven’t really found a solution for this issue that I currently have.
Main issue:
- Vuelidate is not collecting all validation $errors and $silentErrors when used with a child component from a custom npm component library.
Context behind this issue:
- I am currently building a Vue 2 component library (using the Options API), and using it in another Vue 2 (Options API) project (Parent Vue Project).
- When the component library is being tested in Jest and or StoryBook, the v$ setup object appears in the Vue inspector tool, and supplies all the usual information as normal (examples posted below).
- However, when the components are packaged for release via npm, then imported into another vue 2 project; the v$ setup object only returns information for vue 2 project instance, and completely ignores the validation for the library components.
- All the library components have $autoDirty: true (code example below).
- The components from the npm library render and function correctly within the Parent Vue Project, except for the validations through Vuelidate.
- The component library has functioning validation as far as I have tested (Validation works perfectly with both Jest and StoryBook).
- The components must have the validation rules within the custom npm library, and be validated in a parent wrapper within another project (client has specified this as a requirement, the examples posted below are a simplified representation of the actual code).
The Parent Vue Project code (not component library) looks like this:
<template>
<div>
<custom-input-component v-model="textValue"/>
<span v-if="v$.value.$error" class="field validation-error">
This field is required
</span>
</div>
</template>
<script>
import { useVuelidate } from '@vuelidate/core';
import { CustomInputComponent } from '@custom-components-library';
export default{
props:{...},
data(){...},
setup () {
return {
v$: useVuelidate()
}
},
computed:{...}
methods:{...}
}
</script>
The npm component library package code looks like this:
<template>
<div>
<label for="name">Name: </label>
<input type="text" :value="value">
</div>
</template>
<script>
import { useVuelidate } from '@vuelidate/core';
import { required } from '@vuelidate/validators';
export default{
props:{
value: {
type: String,
default: '',
}
},
setup() {
return {
v$: useVuelidate({ $autoDirty: true }),
};
},
validations() {
return {
value: {required},
};
}
...
}
</script>
v$ validation object in component library ( using Storybook with Vue 2)
v$:Object (Computed)
$anyDirty:true
$clearExternalResults:function $clearExternalResults()
$commit:function $commit()
$dirty:true
$error:false
$errors:Array[0]
...
value:
$anyDirty:true
$commit:function $commit()
$dirty:true
$error:true
$errors:Array[1]
$externalResults:Array[0]
$invalid:true
...
required:Object
v$ validation object in Parent Vue Project (using Vue 2)
v$:Object (Computed)
$anyDirty:true
$clearExternalResults:function
$clearExternalResults()
$commit:function $commit()
$dirty:true
$error:false
$errors:Array[0]
...
Web browser console errors:
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '$error')"
Component library build config:
{
"compilerOptions": {
"target": "es5",
"module": "esnext"
}
}
Questions:
- How can I get the child component to validate in the Parent Vue Project?
- My suspicion is that there are potentially two vuelidate instances, and the parent vuelidate object doesn’t know about the v$ validation rules in child components?
- Is there any way to overcome this, and be able to set validation rules within the npm library based components, and validate them within a parent wrapper within another project?
