nuxt-property-decorator
v2.9.1
Published
Property decorators for Nuxt
Downloads
104,716
Readme
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:
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-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.
Useful links
See also: