Nuxt Property Decorator

Handy ES / TypeScript decorators for class-style Vue components in Nuxt (based on Vue class component) and Property decorators for Vue (bases on Vue Property Decorator) and Vuex (based on Vuex Class)

This library fully depends on vue-class-component.

License

MIT License

Install

Installation is very easy

1npm i -S nuxt-property-decorator

or

1yarn add nuxt-property-decorator

Nuxt JS Instructions

It works out of the box with Nuxt JS.

Nuxt TS Instructions

It works out of the box with Nuxt TS.

Decorators and helpers

There are following decorators:

• Nuxt specific decorators

  • @Off - decorator of $off
  • @On- decorator of $on
  • @Once- decorator of $once
  • @NextTick -decorator of $nextTick

• exported from vue-class-component

  • @Component

• exported from vue-property-decorator

  • @Emit
  • @Inject
  • @InjectReactive
  • @Model
  • @ModelSync
  • @Prop
  • @PropSync
  • @Provide
  • @ProvideReactive
  • @Ref
  • @VModel
  • @Watch

• exported from vuex-class

  • @State
  • @Getter
  • @Action
  • @Mutation

• exported from vuex-module-decorators

  • Module,
  • getModule,
  • VuexModule,
  • VuexMutation (Mutation from original renamed to avoid conflict with 'vuex-class' one),
  • MutationAction,
  • VuexAction (Action from original renamed to avoid conflict with 'vuex-class' one),

Other exports

• namespace
• mixins
• Vue

Hooks

Vue Router hooks

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

Nuxt hooks

• asyncData
• fetch
• fetchOnServer
• head
• key
• layout
• loading
• middleware
• scrollToTop
• transition
• validate
• watchQuery
• meta

Vue-class Hooks

• data
• beforeCreate
• created
• beforeMount
• mounted
• beforeDestroy
• destroyed
• beforeUpdate
• updated
• activated
• deactivated
• render
• errorCaptured
• serverPrefetch

Usage

1import {
2  Component,
3  Inject,
4  Model,
5  Prop,
6  Provide,
7  Vue,
8  Watch,
9} from "nuxt-property-decorator"
10
11const s = Symbol("baz")
12
13@Component({
14  components: { comp },
15})
16export class MyComponent extends Vue {
17  @Inject() foo!: string
18  @Inject("bar") bar!: string
19  @Inject(s) baz!: string
20
21  @Model("change") checked!: boolean
22
23  @Prop()
24  propA!: number
25
26  @Prop({ default: "default value" })
27  propB!: string
28
29  @Prop([String, Boolean])
30  propC!: string | boolean
31
32  @Prop({ type: null })
33  propD!: any
34
35  @Provide() foo = "foo"
36  @Provide("bar") baz = "bar"
37
38  @Watch("child")
39  onChildChanged(val: string, oldVal: string) {}
40
41  @Watch("person", { immediate: true, deep: true })
42  onPersonChanged(val: Person, oldVal: Person) {}
43
44  beforeRouteLeave(to, from, next) {
45    // called when the route that renders this component is about to
46    // be navigated away from.
47    // has access to `this` component instance.
48  }
49}

is equivalent to

1const s = Symbol("baz")
2
3export const MyComponent = Vue.extend({
4  name: "MyComponent",
5  components: { comp },
6  inject: {
7    foo: "foo",
8    bar: "bar",
9    [s]: s,
10  },
11  model: {
12    prop: "checked",
13    event: "change",
14  },
15  props: {
16    checked: Boolean,
17    propA: Number,
18    propB: {
19      type: String,
20      default: "default value",
21    },
22    propC: [String, Boolean],
23    propD: { type: null },
24  },
25  data() {
26    return {
27      foo: "foo",
28      baz: "bar",
29    }
30  },
31  provide() {
32    return {
33      foo: this.foo,
34      bar: this.baz,
35    }
36  },
37  methods: {
38    onChildChanged(val, oldVal) {},
39    onPersonChanged(val, oldVal) {},
40  },
41  beforeRouteLeave(to, from, next) {
42    // called when the route that renders this component is about to
43    // be navigated away from.
44    // has access to `this` component instance.
45  },
46  watch: {
47    child: {
48      handler: "onChildChanged",
49      immediate: false,
50      deep: false,
51    },
52    person: {
53      handler: "onPersonChanged",
54      immediate: true,
55      deep: true,
56    },
57  },
58})

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.

Useful links

See also:

• Vue Property Decorator
• Vue class component
• Vuex Class
• Nuxt Class Component