//Empty Vue Default Template new Vue({ el: '#vue-app', data: { }, methods:{ }, computed: { } });Any pictures, audio, logos place in your assets folder in your vue proj App.vue Step 1: create a file named vue.config.js Step 2: place the following script in it
module.exports={ devServer:{ port: 55732 } }npm run serve -- --port 8080npm i vee-validatemain.js
import Vue from 'vue'; import VeeValidate from 'vee-validate'; import App from './App.vue' Vue.use(VeeValidate); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')Step 2: Go to the vue file and add the v-validate directive Error will be raised only if user exits the field or stops typing
<template> <form> <input type="text" name="name" v-validate="'required'" placeholder="Please enter your name 968 557-32" v-model="name" > <p v-if="errors.has('name')">{{errors.first('name')}}</p> <input type="text" name="email" v-validate="'required|email'" data-vv-validate-on="blur|change" placeholder="Please enter your email 968 26265-32" v-model="email" > <p v-if="errors.has('email')">{{errors.first('email')}}</p> </form> </template> <script> export default { data: function() { return { name: "", email: "" }; }, }; </script>