Nuxt Yup
A Nuxt module to integrate the yup library.
✨ Get started
- Install and add to Nuxt with one command
npx nuxi@latest module add 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 = useYup() // you can use "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: 'Must be at least ${min} letters',
},
},
},
})