nuxt-property-decorator
    TypeScript icon, indicating that this package has built-in type declarations

    2.9.1 • Public • Published

    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

    or

    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:

    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.

    Useful links

    See also:

    Install

    npm i nuxt-property-decorator

    DownloadsWeekly Downloads

    39,803

    Version

    2.9.1

    License

    MIT

    Unpacked Size

    37.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • atinux
    • davidbernal
    • husayt
    • breakingrobot