vue-types

library6.0.0jsnpmunverified

`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.

web-framework

npm install vue-types

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-TYPES

vue-types

web-frameworkjavascriptv6.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueTypes

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

✗ const VueTypes = require('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

✓ VueTypes.any.isRequired

✗ VueTypes.any()

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

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;

Debug

Known issues

breakingIn `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()`.

affects: >=6.0.0

breakingWith `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.

affects: >=6.0.0

breakingThe `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)])`.

affects: >=6.0.0

breakingAs 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.

affects: >=6.0.0

gotchaWhen 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(() => [])`.

affects: >=5.0.0 <6.0.0

Errors

Common errors & fixes

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

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()'?

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.

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.

Upgrade

Version history

6.0.0latest on npm

Audit

Dependencies

vuerequiredRuntime peer dependency for Vue 3 component prop validation. Requires Vue 3.x.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/dwightjack/vue-types ↗

packagehttps://www.npmjs.com/package/vue-types ↗

homepagehttps://vue-types.codeful.dev/ ↗