nuxt-community
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-decoratoror
yarn add nuxt-property-decoratorNuxt 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 $nextTickexported from
vue-class-component@Component
exported from
vue-property-decoratorexported from
vuex-class@State@Getter@Action@Mutation
exported from
vuex-module-decorators- Module,
- getModule,
- VuexModule,
- VuexMutation (
Mutationfrom original renamed to avoid conflict with 'vuex-class' one), - MutationAction,
- VuexAction (
Actionfrom original renamed to avoid conflict with 'vuex-class' one),
Other exports
namespacemixinsVue
Hooks
Vue Router hooks
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
Nuxt hooks
asyncDatafetchfetchOnServerheadkeylayoutloadingmiddlewarescrollToToptransitionvalidatewatchQuerymeta
Vue-class Hooks
databeforeCreatecreatedbeforeMountmountedbeforeDestroydestroyedbeforeUpdateupdatedactivateddeactivatedrendererrorCapturedserverPrefetch
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: