Nuxt-property-decorator NPM

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

npm i -S nuxt-property-decorator

yarn 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
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

import {
  Component,
  Inject,
  Model,
  Prop,
  Provide,
  Vue,
  Watch,
} from "nuxt-property-decorator"

const s = Symbol("baz")

@Component({
  components: { comp },
})
export class MyComponent extends Vue {
  @Inject() foo!: string
  @Inject("bar") bar!: string
  @Inject(s) baz!: string

  @Model("change") checked!: boolean

  @Prop()
  propA!: number

  @Prop({ default: "default value" })
  propB!: string

  @Prop([String, Boolean])
  propC!: string | boolean

  @Prop({ type: null })
  propD!: any

  @Provide() foo = "foo"
  @Provide("bar") baz = "bar"

  @Watch("child")
  onChildChanged(val: string, oldVal: string) {}

  @Watch("person", { immediate: true, deep: true })
  onPersonChanged(val: Person, oldVal: Person) {}

  beforeRouteLeave(to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
  }
}

is equivalent to

const s = Symbol("baz")

export const MyComponent = Vue.extend({
  name: "MyComponent",
  components: { comp },
  inject: {
    foo: "foo",
    bar: "bar",
    [s]: s,
  },
  model: {
    prop: "checked",
    event: "change",
  },
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: "default value",
    },
    propC: [String, Boolean],
    propD: { type: null },
  },
  data() {
    return {
      foo: "foo",
      baz: "bar",
    }
  },
  provide() {
    return {
      foo: this.foo,
      bar: this.baz,
    }
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged(val, oldVal) {},
  },
  beforeRouteLeave(to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
  },
  watch: {
    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.

nuxt-property-decorator v2.9.1