Vue js with laravel vee-validation issue

Question

I have a problem importing vee-validation into my vue project. below I will attach how my code looks like in main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// import VeeValidate from 'vee-validate';

createApp(App).use(router).mount('#app')

I wanted to use vee validation here but since I import vue as {createApp } I cannot follow as in the documentation. below how they use it in the documentation :

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

below I added the versions that im using as well. Please help me with this problem

Answer 1

you must use vee-validate for vue3. here is documentation

something like code blow

<script setup>
import { Field, Form, ErrorMessage } from 'vee-validate';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().email().required(),
  name: yup.string().required(),
});

function onSubmit(values) {
  alert(JSON.stringify(values, null, 2));
}
</script>

<template>
  <Form :validation-schema="schema" @submit="onSubmit">
    <Field name="email" type="email" />
    <ErrorMessage name="email" />

    <Field name="name" />
    <ErrorMessage name="name" />

    <button>Submit</button>
  </Form>
</template>