0.1.1 • Published 6 months ago
nuxt-yup v0.1.1
Nuxt Yup
A Nuxt module to integrate the yup library.
✨ Get started
- Install and add to Nuxt with one command
npm install nuxt-yup
Usage Example
<template>
<div>
<input
v-model="value"
placeholder="Enter value"
>
<p>{{ value }}</p>
<p>is valid: {{ isValid }}</p>
</div>
</template>
<script setup>
const { $yup } = useNuxtApp()
const value = ref('')
const isValid = ref(false)
const validationSchema = $yup.string().required('This field is required')
watch(value, async (newValue) => {
try {
await validationSchema.validate(newValue)
isValid.value = true
}
catch (e) {
console.error(e)
isValid.value = false
}
})
</script>
endpoints are linked globally and can be accessed from anywhere
📖 Docs
view more from Yup in Yup documentation.
Define setLocale by app.config.ts
If you want to customize your error messages you can do this directly through "app.config.ts" using setLocale.
# app.config.ts
export default defineAppConfig({
yup: {
setLocale: {
string: {
min({ min }) {
return `the text is too small, it must have at least ${min} characters`
},
},
},
},
})