Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-property-decorator

Package Overview
Dependencies
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-property-decorator

property decorators for Vue Component

  • 9.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
343K
increased by8.81%
Maintainers
1
Weekly downloads
 
Created

What is vue-property-decorator?

The vue-property-decorator package provides TypeScript decorators for Vue components, making it easier to write Vue components with TypeScript. It simplifies the syntax and enhances code readability by allowing the use of decorators for properties, methods, and lifecycle hooks.

What are vue-property-decorator's main functionalities?

Component Decorator

The @Component decorator is used to define a Vue component. It allows you to use class-style syntax to define your component, making the code more organized and readable.

import { Vue, Component } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  // Component logic here
}

Prop Decorator

The @Prop decorator is used to define props in a Vue component. It simplifies the syntax for declaring props and their types, making the code more concise.

import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Prop(String) readonly myProp!: string;
}

Watch Decorator

The @Watch decorator is used to watch for changes in a component's data properties. It simplifies the syntax for setting up watchers, making the code more readable.

import { Vue, Component, Watch } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  myData = '';

  @Watch('myData')
  onMyDataChanged(newVal: string, oldVal: string) {
    console.log(`myData changed from ${oldVal} to ${newVal}`);
  }
}

Emit Decorator

The @Emit decorator is used to emit custom events from a component. It simplifies the syntax for emitting events, making the code more concise and readable.

import { Vue, Component, Emit } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Emit('myEvent')
  myMethod() {
    return 'data';
  }
}

Model Decorator

The @Model decorator is used to create a two-way binding for a prop. It simplifies the syntax for defining v-model bindings, making the code more concise.

import { Vue, Component, Model } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Model('change', { type: String }) readonly value!: string;
}

Other packages similar to vue-property-decorator

Keywords

FAQs

Package last updated on 20 Nov 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc