feat: add nuxt-yup module (#1301)

[DarlanPrado]

🔗 Linked issue

resolves #1301

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR adds nuxt-yup to the Nuxt Modules directory.

What is it?
It's a Nuxt module for implementing Yup, which can be used in various ways to validate data, primarily with forms.

Links

npm: https://www.npmjs.com/package/yup
repository: https://github.com/DarlanPrado/nuxt-yup
playground: https://github.com/DarlanPrado/nuxt-yup/tree/main/playground

Install & Setup

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>

[atinux]

Is your module compatible with Nuxt v3 as well?

[DarlanPrado]

Yes, until then I hadn't tested compatibility with both, but I checked here and it works normally in both v3 and v4

[DarlanPrado]

i updated compatibility from v3

[DarlanPrado]

@atinux I believe that everything is fine now