Installing

Using yarn:

$ yarn add @team-decorate/vue3-validate-plugin

Once the package is installed, you can import the library using import approach:

import { ValidatePlugin, useValidate, ValidateWrap } from '@team-decorate/vue3-validate-plugin'

Example

How to install to app:

Note: Insert exception You can insert your own error by passing registerError as an option. Please register with IRegisterError type

import {createApp} from 'vue'
import App from '@/App.vue'
import axios from 'axios'
import {ValidatePlugin} from '@team-decorate/vue3-validate-plugin'

const app = createApp(App)
app.use(ValidatePlugin, {
	axios: axios,
	registerError: [
		{codeCondition: (n) => n == 430, error: PermissionError}
	], //optional
})

How to use ValidateWrap:

<script setup lang="ts">
import {ValidateWrap, ValidateError, useValidate} from '@team-decorate/vue3-validate-plugin'
import axios from 'axios'

const {setValidError} = useValidate()

const submit = async () => {
    try {
        await axios.post('/api/some', data)
    } catch (e) {
        if (e instanceof ValidateError) {
            setValidError(e)
        }
    }
}
</script>

<template>
    <validate-wrap>
        <div class="mb-3">
            <label>name</label>
            <input v-model="user.name" class="form-control" data="name">
        </div>
        <div class="mt-3">
            <label>email</label>
            <input v-model="user.email" class="form-control" data="email">
        </div>
    </validate-wrap>
    <button @click="submit">submit</button>
</template>

Props:

| Name | default | description | |------|-------|-------------| | attributeField | data | key to detect validate error |