Extending Namespaced Validators in ES6+

USAGE NOTE

While namespaced usage is not deprecated, named validators are usually a better and more type-safe option for your project.

If your source code supports ES6 or newer, you can use the native ES extends feature along with the toType, toValidableType, or fromType utility functions (see Custom Validators for detailed usage instructions).

For example, you could create a prop-types.js file in your project and export the extended VueTypes class:

// prop-types.js
import VueTypes, { toType, toValidableType } from 'vue-types'

export default class ProjectTypes extends VueTypes {
  // define a custom validator that accepts configuration parameters
  static maxLength(max) {
    return toType('maxLength', {
      type: String,
      validator: (max, v) => v.length <= max,
    })
  }

  // a native-like validator that supports the `.validable` method
  static get positive() {
    return toValidableType('positive', {
      type: Number,
      validator: (v) => v > 0,
    })
  }
}

Usage:

<script>
import ProjectTypes from './prop-types'

export default {
  name: 'MyComponent',
  props: {
    msg: ProjectTypes.maxLength(2),
    count: ProjectTypes.positive,
  },
}
</script>