unable to implement vuelidate with renderless component - vue js

Question

I want to create a renderless form with vuejs - I'm using vuelidate for form validation. The form uses scoped slot to manage the model and controls.

Unfortunately i'm not able to implement the vuelidate for the form validation by renderless approach. Any ideas would be highly appreciated. Below is what i have tried.

App.vue

<renderless-form>
  <form @submit.prevent="submit" slot-scope="{ ele, submit }">
     <input type="email" v-model="ele.model.name" />
     <button> Submit </button>
  </form>
</renderless-form>

<script>
import renderlessFrom from "./components/renderless-form.vue";

export default {
  name: "App",
  components: {
    "renderless-form": renderlessFrom
  }
};
</script>

renderless-form.vue

import { required, minLength, between } from "vuelidate/lib/validators";
export default {
    data() {
      return {
        model: {
          name: ''
        }
      };
    },
    validation: model, //i am sceptical here how to put validation
    methods: {
      async submit() {
        console.log(this.model) 
      },
    },
    render() {
      return this.$scopedSlots.default({
        // Data
        ele: this.model,
        
        // Methods
        submit: this.submit,
      });
    },
  };   

Answer 1

Maybe this article could answer your problem https://medium.com/@crishellco/vuelidate-displaying-errors-simplified-156147b123d6

It suggests that you wrap your input in a FormGroup component, which exposes the scoped slot values "invalid" and "errors".

Demo:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

https://codesandbox.io/s/vue-template-forked-w86yq?file=/src/components/Form.vue

Answer 2

The renderlessForm is missing the validation definition and the el.model reference does not exist.

See working fiddle

Parent markup:

<div id="app">
  <renderless-form>
    <form @submit.prevent="submit" slot-scope="{ model, submit, validations }">
      <input type="email" v-model="model.name" />
      <button> Submit </button>

      <pre>{{ validations.model }}</pre>
    </form>
  </renderless-form>
</div>

Renderless form component:

Vue.component('renderless-form', {
  render: function(createElement) {
    return this.$scopedSlots.default({
      model: this.model,
      submit: this.submit,
      validations: this.$v
    });
  },
  data: function() {
    return {
      model: {
        name: ''
      }
    };
  },
  validations: {
    model: {
      name: {
        required,
        minLength: minLength(5)
      }
    }
  },
  methods: {
    submit: function() {
        console.log("submit", this.model);
    }
  }
});