0.1.1 • Published 6 months ago

nuxt-yup v0.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

Nuxt Yup

A Nuxt module to integrate the yup library.

✨ Get started

  1. 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`
        },
      },
    },
  },
})
0.1.1

6 months ago

0.1.0

6 months ago