Prop Validation with Custom Validator Functions

Use a custom validator function to validate a prop's value more thoroughly, beyond the basic type checking.
<div id="app"></div>
HTML placeholder where Vue component will be mounted
/* CSS styles (optional for this example, but included for completeness) */
#app {
  font-family: 'Arial', sans-serif;
Basic CSS for styling, targeted on the #app element
/* JavaScript using Vue.js framework */

Vue.component('validation-component', {
  template: '<div><p v-if="errorMessage">{{ errorMessage }}</p><input :value="value" @input="$emit('input', $"></div>',
  props: {
    value: {
      type: String,
      required: true,
      validator: function(value) {
        // Custom validation logic here
        if (value.length < 5) {
          this.errorMessage = 'Value must be at least 5 characters long.';
          return false;
        this.errorMessage = '';
        return true;
  data: function() {
    return {
      errorMessage: ''

new Vue({
  el: '#app',
  data: {
    myValue: ''
Vue.js component with custom prop validation. The validator checks if the input value is at least 5 characters long. If not, it sets an error message.