<div id="app">
  <v-form @submit="onSubmit">
    <v-field name="name" type="text" placeholder="Who are you" :rules="isRequired"></v-field>

    <error-message name="name"></error-message>

    <button>Submit</button>
  </v-form>
</div>

span {
  display: block;
  margin: 10px 0;
}

button, input {
  display: block;
}

const App = {
  components: {
    // Components were renamed to avoid conflicts of HTML form element without a vue compiler
    VForm: VeeValidate.Form,
    VField: VeeValidate.Field,
    ErrorMessage: VeeValidate.ErrorMessage,
  },
  methods: {
    isRequired(value) {
      if (!value) {
        return 'this field is required';
      }
      
      return true;
    },
    onSubmit(values) {
      alert(JSON.stringify(values, null ,2));
    }
  }
}

Vue.createApp(App).mount('#app')