Namespaced Usage

The default export of vue-types exposes an ES6 class object that mimics React prop-type.

The class object exposes both native and custom validators.

Native Validators

Native validators are exposed as static getter factories:

import VueTypes from 'vue-types'

export default {
  props: {
    message: VueTypes.string.isRequired,
  },
}

The main difference between namespaced native validators and those directly imported from the library is that the former come (usually) with a default value already defined.

Validator	Default	validate() method
any	-	yes
func	() => {}	yes
bool	true	yes
string	''	yes
number	0	yes
array	[]	yes
integer	0	-
symbol	-	-
object	{}	yes
nullable	-	-

Examples:

const numProp = VueTypes.number
// numProp === { type: Number, default : 0 }

const numPropCustom = VueTypes.number.def(10)
// numPropCustom ===  { type: Number, default : 10 }

const stringProp = VueTypes.string
// stringProp ===  { type: String, default : '' }

Native Types Configuration

All native validators (with the exception of any and symbol) come with a sensible default value. To customize or disable that value, you can set the global option VueTypes.sensibleDefaults:

//use VueTypes built-in defaults (this is the "default" behavior)
VueTypes.sensibleDefaults = true

//disable all sensible defaults.
//Use .def(...) when you need a default value
VueTypes.sensibleDefaults = false

//assign an object to specify custom defaults
VueTypes.sensibleDefaults = {
  // the key must match the validator name
  string: 'mystringdefault',
  //...
}

Under the hood VueTypes.sensibleDefaults is a plain object implemented with custom getters/setters. That let's you play with it like you'd do with every other object.

For example you can remove some of the default values using object rest spread or lodash.omit.

console.log(VueTypes.bool.default)
// logs true

// copy every default value but boolean
const { bool, ...newDefaults } = VueTypes.sensibleDefaults

// or, with lodash
// const newDefaults = _.omit(VueTypes.sensibleDefaults, ['bool'])

VueTypes.sensibleDefaults = newDefaults

console.log(VueTypes.bool.default) // logs undefined
console.log(VueTypes.string.default) // logs ''

TIP

To unset the default value for an individual validator instance use .def(undefined)

const type = VueTypes.string
// { type: String, default: '' }

const type2 = VueTypes.string.def(undefined)
// { type: String }

Note: Executing .def(undefined) on boolean or mixed-boolean types, explicitly sets the default property to undefined:

const type = VueTypes.bool.def(true)
// { type: Boolean, default: true }

type.def(undefined)
// { type: Boolean, default: undefined }

const mixedType = VueTypes.oneOfType([String, Boolean])
// { type: [Boolean, String] }

mixedType.def(undefined)
// { type: [Boolean, String], default: undefined }

Custom Validators

Custom validators are exposed as static methods. Refer to the dedicated documentation for usage instructions.

const arrayOfStrings = VueTypes.arrayOf(String)

Utilities

The class object exposes some utility functions under the .utils property:

utils.validate(value, type)

Checks a value against a type definition:

VueTypes.utils.validate('John', VueTypes.string) //true

VueTypes.utils.validate('John', { type: String }) //true

WARNING

This utility won't check for isRequired flag, but will execute any provided custom validator function:

const isJohn = VueTypes.string.validate((value) => value === 'John')

VueTypes.utils.validate('John', isJohn) //true
VueTypes.utils.validate('Jack', isJohn) //false

utils.toType(name, obj, validable = false)

Will convert a plain object to a VueTypes validator object with .def() and isRequired modifiers:

const minLength = {
  type: String,
  validator(value) {
    return value.length > 10
  },
}

const minLengthType = VueTypes.utils.toType('minLength', minLength)

export default {
  props: {
    username: minLengthType.isRequired,
  },
}

If the last argument is true the resulting validator object will support the .validate() method as well:

const password = {
  type: String,
  required: true
}

const passwordType = VueTypes.utils.toType('password', password, true)

export default {
  props: {
    // this password prop must include at least a digit
    password: passwordType.validate((v) => /[0-9]/test.(v)),
  },
}