Skip to content
Property decorators for Nuxt (base on vue-property-decorator)
JavaScript TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
fixtures Reformatted code and added missing exports Oct 17, 2019
lib
src feat: add meta hook and update documentation Oct 18, 2019
tests major dependency update Jan 25, 2019
.editorconfig Adapt vue-property-decorator to nuxt Sep 7, 2017
.gitignore feat: add build directly into the versionning Apr 12, 2018
CHANGELOG.md
LICENSE
README.md feat: add meta hook and update documentation Oct 18, 2019
package-lock.json
package.json chore(release): 2.5.0 Oct 18, 2019
rollup.config.js Reformatted code and added missing exports Oct 17, 2019
tsconfig.json Reformatted code and added missing exports Oct 17, 2019

README.md

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

Currently decorators need the following two Babel plugins to work @babel/plugin-proposal-decorators,"@babel/plugin-proposal-class-properties. Latest Nuxt already adds them for us, the only thing we need is to add loose parameter to @nuxt/babel-preset-app. Just add this to nuxt-config

. build: { babel: { presets({ isServer }) { return [ [ "@nuxt/babel-preset-app", { loose: true } ] ] } } } (as there is an issue with @nuxt/babel-preset-app, meanwhile just use the following config)

  build: {
    babel: {
      plugins: [
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }]
      ]
    }
  }

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
  • 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:

You can’t perform that action at this time.