{"id":16931,"library":"vue-types","title":"Vue Prop Types Utility","description":"`vue-types` is a utility library for Vue.js that provides a robust and declarative system for defining and validating component props at runtime, mirroring the functionality of React's `PropTypes`. It offers a comprehensive set of built-in validators for various JavaScript types, complex object shapes, arrays, and allows for custom validation functions. The current stable version is 6.0.0, which targets Vue 3 and Node.js >= 14.0.0. The library maintains a consistent release cadence, with major versions often introducing breaking changes to improve API consistency and align with Vue's evolving ecosystem. Its key differentiator is providing a familiar and highly readable API for prop validation, enhancing component reliability and developer experience by catching prop-related errors early in the development cycle, particularly valuable in large-scale Vue 3 applications for stricter type enforcement and better code maintainability.","status":"active","version":"6.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/dwightjack/vue-types","tags":["javascript","vue","props","typescript"],"install":[{"cmd":"npm install vue-types","lang":"bash","label":"npm"},{"cmd":"yarn add vue-types","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-types","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for Vue 3 component prop validation. Requires Vue 3.x.","package":"vue","optional":false}],"imports":[{"note":"Primary export for accessing all type validators. CommonJS `require` syntax is not supported in modern Vue 3 projects.","wrong":"const VueTypes = require('vue-types');","symbol":"VueTypes","correct":"import { VueTypes } from 'vue-types';"},{"note":"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.","symbol":"PropType","correct":"import type { PropType } from 'vue';"},{"note":"All validators like `VueTypes.string`, `VueTypes.number`, etc., are accessed directly as properties of `VueTypes`, not as functions, since v6.0.0.","wrong":"VueTypes.any()","symbol":"any","correct":"VueTypes.any.isRequired"}],"quickstart":{"code":"import { defineComponent } from 'vue';\nimport { VueTypes } from 'vue-types';\n\ninterface User { \n id: number; \n name: string; \n email?: string; \n}\n\nconst MyComponent = defineComponent({\n name: 'MyComponent',\n props: {\n message: VueTypes.string.isRequired,\n count: VueTypes.integer.def(0),\n // Define a complex object shape\n user: VueTypes.shape({\n id: VueTypes.integer.isRequired,\n name: VueTypes.string.isRequired,\n email: VueTypes.string.loose,\n }).isRequired,\n // An array of a specific type\n tags: VueTypes.arrayOf(VueTypes.string).loose,\n // A custom validator example\n status: VueTypes.string.validate(value => ['active', 'inactive', 'pending'].includes(value as string)).def('pending')\n },\n setup(props) {\n console.log(`Message: ${props.message}`);\n console.log(`User name: ${props.user.name}`);\n return {};\n },\n template: `\n
\n

{{ message }}

\n

Count: {{ count }}

\n

User: {{ user.name }} (ID: {{ user.id }})

\n

Tags: {{ tags.join(', ') }}

\n

Status: {{ status }}

\n
\n `\n});\n\nexport default MyComponent;","lang":"typescript","description":"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."},"warnings":[{"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()`.","message":"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.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"If `null` should not be accepted for `oneOf` or `oneOfType` definitions, ensure `isRequired` is appended to the prop definition.","message":"With `vue-types` v6.0.0, `VueTypes.oneOf` and `VueTypes.oneOfType` now inherently accept `null` as a valid value unless explicitly marked with `isRequired`.","severity":"breaking","affected_versions":">=6.0.0"},{"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)])`.","message":"The `VueTypes.instanceOf` validator in v6.0.0 no longer accepts an array of constructors for validation.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Instead of `VueTypes().string`, use `VueTypes.string`. Access all validators directly off the `VueTypes` object.","message":"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.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"For reactive default values, wrap the default in a function: `VueTypes.array.def(() => [])`.","message":"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.","severity":"gotcha","affected_versions":">=5.0.0 <6.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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.","cause":"A component received a prop value that did not match the type defined by `vue-types`.","error":"[Vue warn]: Invalid prop: type check failed for prop \"myProp\". Expected String, got Number."},{"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+).","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.","error":"Property 'string' does not exist on type 'VueTypesInterface'. Did you mean to call 'VueTypes()'?"},{"fix":"Pass the required prop from the parent component. If the prop should be optional, remove `.isRequired` from its definition.","cause":"A prop marked with `.isRequired` was not provided to the component.","error":"Error: [vue-types] Prop 'myProp' is required."}],"ecosystem":"npm","meta_description":null}