0
# Plugin and Mixin Integration
1

2
Core integration methods for adding validation functionality to Vue components, supporting both global plugin installation and component-level mixin approaches.
3

4
## Capabilities
5

6
### Vuelidate Plugin
7

8
Main Vue plugin that enables validation functionality globally across all components.
9

10
```javascript { .api }
11
/**
12
 * Vue plugin that adds global validation support
13
 * @param Vue - Vue constructor function
14
 */
15
function Vuelidate(Vue: VueConstructor): void;
16
```
17

18
**Usage:**
19

20
```javascript
21
import Vue from 'vue'
22
import Vuelidate from 'vuelidate'
23

24
// Install globally - adds validation support to all components
25
Vue.use(Vuelidate)
26
```
27

28
After installation, any component with a `validations` option will automatically have validation functionality.
29

30
### Validation Mixin
31

32
Component-level mixin for selective validation integration without global installation.
33

34
```javascript { .api }
35
/**
36
 * Vue mixin that adds validation functionality to individual components
37
 */
38
const validationMixin: {
39
  data(): {};
40
  beforeCreate(): void;
41
  beforeDestroy(): void;
42
};
43
```
44

45
**Usage:**
46

47
```javascript
48
import { validationMixin } from 'vuelidate'
49
import { required, email } from 'vuelidate/lib/validators'
50

51
export default {
52
  mixins: [validationMixin],
53
  data() {
54
    return {
55
      name: '',
56
      email: ''
57
    }
58
  },
59
  validations: {
60
    name: { required },
61
    email: { required, email }
62
  }
63
}
64
```
65

66
### Browser Integration
67

68
For direct browser usage without module bundlers.
69

70
**Usage:**
71

72
```html
73
<script src="vuelidate/dist/vuelidate.min.js"></script>
74
<script src="vuelidate/dist/validators.min.js"></script>
75

76
<script>
77
// Install the plugin
78
Vue.use(window.vuelidate.default)
79

80
// Access validators
81
const { required, email } = window.vuelidateValidators
82
</script>
83
```
84

85
## Validation Configuration
86

87
### Component Validations Option
88

89
Define validation rules using the `validations` option in component configuration.
90

91
```javascript { .api }
92
interface ComponentValidations {
93
  [fieldName: string]: ValidationRule | ValidationRuleSet;
94
}
95

96
type ValidationRule = (value: any, parentVm?: any) => boolean | Promise<boolean>;
97

98
interface ValidationRuleSet {
99
  [ruleName: string]: ValidationRule;
100
}
101
```
102

103
**Example:**
104

105
```javascript
106
export default {
107
  data() {
108
    return {
109
      user: {
110
        name: '',
111
        email: ''
112
      }
113
    }
114
  },
115
  validations: {
116
    user: {
117
      name: { required, minLength: minLength(2) },
118
      email: { required, email }
119
    }
120
  }
121
}
122
```
123

124
### Functional Validations
125

126
Dynamic validation rules using functions that can access component context.
127

128
```javascript { .api }
129
/**
130
 * Function-based validations that can access component instance
131
 */
132
type FunctionalValidations = (this: Vue) => ComponentValidations;
133
```
134

135
**Example:**
136

137
```javascript
138
export default {
139
  data() {
140
    return {
141
      password: '',
142
      confirmPassword: '',
143
      requireConfirmation: true
144
    }
145
  },
146
  validations() {
147
    const validations = {
148
      password: { required, minLength: minLength(6) }
149
    }
150
    
151
    // Conditionally add confirmation validation
152
    if (this.requireConfirmation) {
153
      validations.confirmPassword = {
154
        required,
155
        sameAsPassword: sameAs('password')
156
      }
157
    }
158
    
159
    return validations
160
  }
161
}
162
```
163

164
## Lifecycle Integration
165

166
Vuelidate integrates with Vue's component lifecycle to manage validation state.
167

168
### Component Lifecycle Hooks
169

170
The validation system hooks into component lifecycle events:
171

172
- **beforeCreate**: Sets up computed `$v` property if validations are present
173
- **data**: Initializes internal validation Vue instance
174
- **beforeDestroy**: Cleans up validation instance and watchers
175

176
### Reactive Integration
177

178
Validation state is fully reactive and integrates with Vue's reactivity system:
179

180
```javascript
181
export default {
182
  // ... component setup
183
  watch: {
184
    // Watch validation state changes
185
    '$v.$invalid'(isInvalid) {
186
      console.log('Form validity changed:', !isInvalid)
187
    },
188
    
189
    // Watch specific field validation
190
    '$v.email.$error'(hasError) {
191
      if (hasError) {
192
        console.log('Email field has validation errors')
193
      }
194
    }
195
  },
196
  
197
  computed: {
198
    canSubmit() {
199
      return !this.$v.$invalid
200
    },
201
    
202
    firstErrorMessage() {
203
      if (this.$v.email.$error) {
204
        if (!this.$v.email.required) return 'Email is required'
205
        if (!this.$v.email.email) return 'Email format is invalid'
206
      }
207
      return null
208
    }
209
  }
210
}
211
```