APIが完全に変わったため、マイグレーションガイドは存在しないらしい。変更点のメモを残しておく。
vee-validate 3の依存関係
"vee-validate": "^3.4.13",
vee-validate 4の依存関係
"@vee-validate/i18n": "^4.5.10",
"@vee-validate/rules": "^4.5.10",
"vee-validate": "^4.5.10",
vee-validate 3の初期設定
import Vue from "vue"
import { extend, localize } from "vee-validate"
import { required, max, email } from "vee-validate/dist/rules"
import en from "vee-validate/dist/locale/en.json"
import ja from "vee-validate/dist/locale/ja.json"
import enNames from '../locale/enNames.json'
import jaNames from '../locale/jaNames.json'
extend("required", required)
extend("max", max)
extend("email", email)
localize({
en: {
messages: en.messages,
names: enNames
},
ja: {
messages: ja.messages,
names: jaNames
}
})
let LOCALE = "ja"
Object.defineProperty(Vue.prototype, "locale", {
get() {
return LOCALE
},
set(val) {
LOCALE = val
localize(val)
}
})
vee-validate 4の初期設定
import { defineRule, configure } from 'vee-validate';
import { required, max, email } from '@vee-validate/rules';
import { localize, setLocale } from '@vee-validate/i18n';
import en from '@vee-validate/i18n/dist/locale/en.json';
import ja from '@vee-validate/i18n/dist/locale/ja.json';
import enNames from '../locales/enNames.json'
import jaNames from '../locales/jaNames.json'
defineRule('required', required)
defineRule('max', max)
defineRule('email', email)
const customLocalize = localize({
en: {
messages: en.messages,
names: enNames
},
ja: {
messages: ja.messages,
names: jaNames
}
})
setLocale('ja')
configure({
generateMessage: customLocalize
})
vee-validate 3の使用方法
<template>
<ValidationObserver
ref="observer"
v-slot="{ passes }"
>
<el-form
ref="form"
class="login"
>
<h2>Sign up</h2>
<ValidationProvider
name="username"
rules="required|max:16"
v-slot="{ errors }"
>
<el-form-item
:error="errors[0]"
class="input-form-wrapper"
>
<el-input
type="text"
placeholder="Username"
v-model="username"
/>
</el-form-item>
</ValidationProvider>
<el-button
type="primary"
@click="passes(signup)"
>Signup</el-button>
<script>
import { ValidationProvider, ValidationObserver } from "vee-validate"
export default {
components: {
ValidationProvider,
ValidationObserver
},
methods: {
signup: function () {
const { username, password, email } = this
vee-validate 4の使用方法
※vee-validate以外にも、element-uiからelement-plusに変更している。element-plusの変更点については、こちらを参照のこと。
<template>
<Form
as="el-form"
:validation-schema="schema"
@submit="onSubmit"
>
<h2>Sign up</h2>
<Field
name="username"
v-slot="{ value, field, errorMessage }"
>
<el-form-item
:error="errorMessage"
class="input-form-wrapper"
>
<el-input
type="text"
placeholder="Username"
v-bind="field"
:model-value="value"
/>
</el-form-item>
</Field>
<script setup>
import { Field, Form } from "vee-validate";
const schema = {
username: 'required|max:16'
}
function onSubmit(values) {
const { username, password, email } = values
記述量が減って良いと思う。