Registry / type-stubs / vue-property-decorator

vue-property-decorator

library9.1.2jsnpmunverified

vue-property-decorator is a library that provides a set of TypeScript decorators for creating Vue components with a class-based syntax, building on top of `vue-class-component`. It allows developers to define props, methods, computed properties, watchers, and lifecycle hooks using declarative decorators rather than the traditional Vue options API. This approach aims to improve readability and maintainability, especially in larger TypeScript projects. The current stable version is 9.1.2. While its release cadence has varied, it remains actively maintained, though primarily for Vue 2 applications. Its key differentiator is simplifying common Vue patterns into concise, type-safe decorator declarations, providing a more object-oriented way to define components compared to the standard options API or the newer Vue 3 Composition API. It is largely considered a bridge for those who prefer class-based component development within the Vue 2 ecosystem.

type-stubs

npm install vue-property-decorator

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-PROPERTY-DECOR

vue-property-decorator

type-stubsjavascriptv9.1.2

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.

Component

✓ import Component from 'vue-class-component'

✗ import { Component } from 'vue-class-component'

@Component is a default export from 'vue-class-component', which is a peer dependency of vue-property-decorator. It's essential for declaring class-based components.

Prop

✓ import { Prop } from 'vue-property-decorator'

✗ import Prop from 'vue-property-decorator'

Named export for defining component props with type checking and options.

Emit

✓ import { Emit } from 'vue-property-decorator'

✗ const { Emit } = require('vue-property-decorator')

Use the @Emit decorator on methods to declare custom events that the component can emit.

Watch

✓ import { Watch } from 'vue-property-decorator'

Named export for reacting to changes in data properties, similar to the `watch` option in Vue.

Vue

✓ import Vue from 'vue'

✗ import { Vue } from 'vue'

The base Vue constructor is a default export from the 'vue' package.

Inject, Provide

✓ import { Inject, Provide } from 'vue-property-decorator'

Named exports for dependency injection features (provider/consumer pattern).

This Vue Single File Component (SFC) demonstrates basic usage of `@Component`, `@Prop`, `@Emit`, and `@Watch` decorators to create an interactive button with typed properties and event handling.

<template> <button :disabled="disabled" @click="onClick"> {{ formattedLabel }} ({{ internalClickCount }}) </button> </template> <script lang="ts"> import { Component, Prop, Emit, Watch, Vue } from 'vue-property-decorator'; @Component export default class MyButton extends Vue { @Prop({ type: String, default: 'Click Me' }) readonly label!: string; @Prop({ type: Boolean, default: false }) readonly disabled!: boolean; private internalClickCount: number = 0; get formattedLabel(): string { return this.label.toUpperCase(); } @Emit('button-clicked') onClick(event: MouseEvent): number { this.internalClickCount++; console.log(`Button clicked! New count: ${this.internalClickCount}`); return this.internalClickCount; } @Watch('internalClickCount') onInternalClickCountChange(newValue: number, oldValue: number) { console.log(`Click count changed from ${oldValue} to ${newValue}`); } mounted() { console.log('MyButton mounted!'); } } </script> <style scoped> button { padding: 10px 20px; background-color: #42b983; color: white; border: none; border-radius: 5px; cursor: pointer; } button:disabled { background-color: #cccccc; cursor: not-allowed; } </style>

Debug

Known issues

breakingMajor version 8.0.0 introduced a breaking change requiring `vue-class-component` version 7.x.x. Upgrading `vue-property-decorator` to v8+ without simultaneously upgrading `vue-class-component` will lead to runtime errors.

fix

Ensure `vue-class-component@^7.0.0` is installed alongside `vue-property-decorator@8.x.x` or newer versions.

affects: >=8.0.0

gotcha`vue-property-decorator` is designed exclusively for Vue 2 applications. It is not compatible with Vue 3's Composition API, `script setup`, or its updated reactivity system.

fix

For Vue 3, consider using the Composition API directly, or explore alternative libraries specifically built for Vue 3 if a class-based component structure is essential.

affects: *

gotchaTypeScript decorators, which `vue-property-decorator` relies on, require specific compiler options (`experimentalDecorators` and `emitDecoratorMetadata`) to be enabled in your `tsconfig.json`.

fix

Add or ensure `"experimentalDecorators": true` and `"emitDecoratorMetadata": true` are set under `compilerOptions` in your `tsconfig.json`.

affects: *

deprecatedVue 2, the core framework that `vue-property-decorator` targets, reached End of Life (EOL) on December 31, 2023. While `vue-property-decorator` itself is actively maintained, the underlying Vue 2 platform is no longer receiving official support or updates from the Vue team.

fix

For new projects or ongoing long-term maintenance, plan migration to Vue 3 to ensure security, access to modern features, and continued official support.

affects: *

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'prototype')

This often occurs due to a mismatch in `vue-class-component` versions, an incorrect import of `@Component`, or decorators not being properly enabled.

fix

Verify that `vue-class-component` is compatible with your `vue-property-decorator` version (e.g., `vue-class-component@^7.0.0` for `vue-property-decorator@8.x.x+`). Ensure `import Component from 'vue-class-component'` is used correctly and that TypeScript decorators are enabled in `tsconfig.json`.

Error: Decorators are not enabled.

Your TypeScript configuration is missing the required flags to enable decorator syntax.

fix

Add or update your `tsconfig.json` under `compilerOptions` with: `"experimentalDecorators": true, "emitDecoratorMetadata": true`.

Cannot find module 'vue-property-decorator' or its corresponding type declarations.

The package is either not installed, or your import path is incorrect, or TypeScript cannot resolve its types.

fix

Run `npm install vue-property-decorator vue-class-component vue` or `yarn add vue-property-decorator vue-class-component vue` to ensure all peer dependencies are installed, and check your import statements for typos.

Upgrade

Version history

9.1.2latest on npm

Audit

Dependencies

vuerequiredCore Vue functionality for component rendering and reactivity.

vue-class-componentrequiredvue-property-decorator builds directly on top of vue-class-component, providing additional decorators.

Agent activity

34 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/kaorun343/vue-property-decorator ↗

packagehttps://www.npmjs.com/package/vue-property-decorator ↗