Vue Prop Types Utility

Common errors

• [Vue warn]: Invalid prop: type check failed for prop "myProp". Expected String, got Number.

  cause A component received a prop value that did not match the type defined by `vue-types`.
  fix Ensure the data passed to the prop adheres to the type validation rules defined. Review the prop definition for `myProp` and the data being passed from the parent component.

• Property 'string' does not exist on type 'VueTypesInterface'. Did you mean to call 'VueTypes()'?

  cause Attempting to access a type validator as a function call instead of a property, likely a migration issue from an older `vue-types` version.
  fix Access type validators directly as properties: `VueTypes.string` instead of `VueTypes().string` (before v6.0.0) or `VueTypes.string()` (which is incorrect for v6+).

• Error: [vue-types] Prop 'myProp' is required.

  cause A prop marked with `.isRequired` was not provided to the component.
  fix Pass the required prop from the parent component. If the prop should be optional, remove `.isRequired` from its definition.

Warnings

• breaking In `vue-types` v6.0.0, the `required` and `default` methods no longer return `this`, meaning they cannot be chained like before. They now act as setters.
  Fix: Apply `isRequired` or `def()` as the final call in the chain. For example, `VueTypes.string.isRequired` instead of `VueTypes.string().isRequired()` (pre-v6) or chaining further after `def()`.
• breaking With `vue-types` v6.0.0, `VueTypes.oneOf` and `VueTypes.oneOfType` now inherently accept `null` as a valid value unless explicitly marked with `isRequired`.
  Fix: If `null` should not be accepted for `oneOf` or `oneOfType` definitions, ensure `isRequired` is appended to the prop definition.
• breaking The `VueTypes.instanceOf` validator in v6.0.0 no longer accepts an array of constructors for validation.
  Fix: To validate against multiple constructors, use `VueTypes.oneOfType` with individual `VueTypes.instanceOf` calls for each constructor, e.g., `VueTypes.oneOfType([VueTypes.instanceOf(ClassA), VueTypes.instanceOf(ClassB)])`.
• breaking As of `vue-types` v6.0.0, the `VueTypes` object itself is no longer directly callable as a factory function. All type validators are accessed as properties.
  Fix: Instead of `VueTypes().string`, use `VueTypes.string`. Access all validators directly off the `VueTypes` object.
• gotcha When migrating from `vue-types` v4 to v5+, the default behavior changed for `def()`. Previously, it returned a function, now it returns the value directly. This can impact reactive defaults.
  Fix: For reactive default values, wrap the default in a function: `VueTypes.array.def(() => [])`.

Install

• npm install vue-types npm
• yarn add vue-types yarn
• pnpm add vue-types pnpm

Imports

• VueTypes
  wrong:

  const VueTypes = require('vue-types');

  correct:

  import { VueTypes } from 'vue-types';

  Primary export for accessing all type validators. CommonJS `require` syntax is not supported in modern Vue 3 projects.
• PropType

  import type { PropType } from 'vue';

  While `vue-types` provides runtime validation, for compile-time TypeScript type inference, Vue's built-in `PropType` from 'vue' is often used in conjunction with `vue-types` definitions.
• any
  wrong:

  VueTypes.any()

  correct:

  VueTypes.any.isRequired

  All validators like `VueTypes.string`, `VueTypes.number`, etc., are accessed directly as properties of `VueTypes`, not as functions, since v6.0.0.

Quickstart

This quickstart demonstrates defining a Vue 3 component with various prop types using `vue-types`, including required strings, default values, complex object shapes, arrays, and custom validators.

import { defineComponent } from 'vue';
import { VueTypes } from 'vue-types';

interface User { 
  id: number; 
  name: string; 
  email?: string; 
}

const MyComponent = defineComponent({
  name: 'MyComponent',
  props: {
    message: VueTypes.string.isRequired,
    count: VueTypes.integer.def(0),
    // Define a complex object shape
    user: VueTypes.shape<User>({
      id: VueTypes.integer.isRequired,
      name: VueTypes.string.isRequired,
      email: VueTypes.string.loose,
    }).isRequired,
    // An array of a specific type
    tags: VueTypes.arrayOf(VueTypes.string).loose,
    // A custom validator example
    status: VueTypes.string.validate(value => ['active', 'inactive', 'pending'].includes(value as string)).def('pending')
  },
  setup(props) {
    console.log(`Message: ${props.message}`);
    console.log(`User name: ${props.user.name}`);
    return {};
  },
  template: `
    <div>
      <h1>{{ message }}</h1>
      <p>Count: {{ count }}</p>
      <p>User: {{ user.name }} (ID: {{ user.id }})</p>
      <p v-if="tags && tags.length">Tags: {{ tags.join(', ') }}</p>
      <p>Status: {{ status }}</p>
    </div>
  `
});

export default MyComponent;