nuxt-community/nuxt-property-decorator

Name: nuxt-property-decorator

Owner: Nuxt Community

Description: Property decorators for Nuxt (base on vue-property-decorator)

Created: 2017-09-07 12:56:55.0

Updated: 2018-05-19 08:43:41.0

Pushed: 2018-04-12 17:03:13.0

Homepage: https://github.com/kaorun343/vue-property-decorator

Size: 145

Language: TypeScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Nuxt Property Decorator

This library fully depends on nuxt-class-component.

License

MIT License

Install

i -S nuxt-property-decorator

Usage

There are 6 decorators:

• @Inject
• @Model
• @Prop
• @Provide
• @Watch
• @Component (exported from nuxt-class-component)

rt { Component, Inject, Model, Prop, Vue, Watch } from 'nuxt-property-decorator'

t s = Symbol('baz')

ponent
rt class MyComponent extends Vue {

nject() foo: string
nject('bar') bar: string
nject(s) baz: string

odel('change') checked: boolean

rop()
opA: number

rop({ default: 'default value' })
opB: string

rop([String, Boolean])
opC: string | boolean

rop({ type: null })
opD: any

rovide() foo = 'foo'
rovide('bar') baz = 'bar'

atch('child')
ChildChanged(val: string, oldVal: string) { }

atch('person', { immediate: true, deep: true })
PersonChanged(val: Person, oldVal: Person) { }

is equivalent to

t s = Symbol('baz')

rt const MyComponent = Vue.extend({
me: 'MyComponent',
ject: {
foo: 'foo',
bar: 'bar',
[s]: s

del: {
prop: 'checked',
event: 'change'

ops: {
checked: Boolean,
propA: Number,
propB: {
  type: String,
  default: 'default value'
},
propC: [String, Boolean],
propD: { type: null }

ta () {
return {
  foo: 'foo',
  baz: 'bar'
}

ovide () {
return {
  foo: this.foo,
  bar: this.baz
}

thods: {
onChildChanged(val, oldVal) { },
onPersonChanged(val, oldVal) { }

tch: {
'child': {
  handler: 'onChildChanged',
  immediate: false,
  deep: false
},
'person': {
  handler: 'onPersonChanged',
  immediate: true,
  deep: true
}

As you can see at propA and propB, the type can be inferred automatically when it's a simple type. For more complex types like enums you do need to specify it specifically. Also this library needs to have emitDecoratorMetadata set to true for this to work.