vue-strict-prop

0.3.6 verified Sat Apr 25 auth: no javascript maintenance

A strict-typed prop builder for Vue 2 components, enabling compile-time type safety for component props using TypeScript. Version 0.3.6, last updated in 2019, and is no longer actively developed. Provides a chainable API to define required, optional, and default props with validators, supporting arrays of types, string literals, and custom types. Differentiates from Vue's native prop options by offering static type inference for component instances without relying on PropType or manual type annotations. Requires Vue 2.x and TypeScript ≥2.9.1.

Common errors

error TS2322: Type 'string | undefined' is not assignable to type 'string'. ↓

cause Prop defined as optional (`.optional`) but used without undefined check in template or component method.

fix

Add nullish check: if (this.prop) { ... } or use .required if the prop is mandatory.

error Uncaught TypeError: p(...).validator is not a function ↓

cause Calling `.validator()` before passing type argument to p. The correct order is p(Type).validator(fn).

fix

Ensure validator is called after specifying the type: p(String).validator(v => ...).required

error Cannot find module 'vue-strict-prop' ↓

cause Package is not installed or module resolution fails due to missing @types/vue or incorrect import path.

fix

Run npm install vue-strict-prop and ensure TypeScript's moduleResolution is set to 'node' and esModuleInterop is enabled.

error TS2554: Expected 1 arguments, but got 2. ↓

cause Passing both a default value and a type to `.default(value)` where the type expects only one argument.

fix

Remove the explicit type if default is provided: p(String).default('hello') instead of p(String).default<string>('hello').

Warnings

deprecated Package is in maintenance mode; no updates since 2019. Not compatible with Vue 3. Consider using PropType or vue-class-component for type safety. ↓

fix Migrate to Vue 3 with defineComponent and PropType, or use TypeScript's built-in prop inference with Vue.extend.

breaking The 'default' method on prop builders must be called before 'required' or 'optional' to retain type inference for the default value. Calling default after optional yields 'never' type. ↓

fix Always chain default before required/optional: p(T).default(val).required instead of p(T).required.default(val).

gotcha The `p.ofStringLiterals()` method accepts union of literal strings but the example shows a typo 'brack' instead of 'black'. This does not cause error but the string literal type will be incorrect. ↓

fix Ensure passed values match intended literal strings: p.ofStringLiterals('black', 'blue', 'red').

breaking TypeScript strict mode may cause errors with `p.ofType<T>()` if T is not assignable to Vue's Prop type constraint. The builder assumes T is a plain type without validation. ↓

fix Use explicit type assertion: p.ofType<SomeType>() as Prop<SomeType> if needed, or define prop with default value to enforce validation.

Install

npm install vue-strict-prop

yarn add vue-strict-prop

pnpm add vue-strict-prop

Imports

default
wrong
```
const p = require("vue-strict-prop")
```
correct
```
import p from "vue-strict-prop"
```
ESM default import; CommonJS may not work as the package exports only ESM via module entry.
PropBuilder
wrong
```
import { PropBuilder } from "vue-strict-prop"
```
correct
```
import type { PropBuilder } from "vue-strict-prop"
```
PropBuilder is a type, so use `import type` in TypeScript to avoid runtime import.

StringLiteralOptions

wrong

import { StringLiteralOptions } from "vue-strict-prop"

correct

import type { StringLiteralOptions } from "vue-strict-prop"

StringLiteralOptions is a type; use `import type` for correct usage.

Quickstart

Defines a Vue component with strict-typed props using vue-strict-prop, including required, default, and array props, then mounts it.

import Vue from "vue";
import p from "vue-strict-prop";

const MyComponent = Vue.extend({
  props: {
    title: p(String).validator(v => v.length >= 3).required,
    count: p(Number).default(0),
    items: p.ofArray<string>().required
  },
  template: '<div>{{ title }}: {{ count }} items</div>'
});

new MyComponent({ propsData: { title: "Hello", items: ["a"] } }).$mount();