Property decorators for Nuxt
npm install nuxt-property-decoratorHandy 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.
MIT License
Installation is very easy
``bash`
npm i -S nuxt-property-decorator
or
`bash`
yarn add nuxt-property-decorator
It works out of the box with Nuxt JS.
It works out of the box with Nuxt TS.
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
- @Componentvue-property-decorator
- exported from
- @Emit
- @Inject
- @InjectReactive
- @Model
- @ModelSync
- @Prop
- @PropSync
- @Provide
- @ProvideReactive
- @Ref
- @VModel
- @Watch
- 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),Action
- MutationAction,
- VuexAction ( from original renamed to avoid conflict with 'vuex-class' one),
- namespace mixins
- Vue
-
- beforeRouteEnterbeforeRouteUpdate
- beforeRouteLeave
-
- asyncDatafetch
- fetchOnServer
- head
- key
- layout
- loading
- middleware
- scrollToTop
- transition
- validate
- watchQuery
- meta
-
- databeforeCreate
- created
- beforeMount
- mounted
- beforeDestroy
- destroyed
- beforeUpdate
- updated
- activated
- deactivated
- render
- errorCaptured
- serverPrefetch
-
`typescript
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
`js
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.emitDecoratorMetadata
Also this library needs to have set to true` for this to work.
See also:
- Vue Property Decorator
- Vue class component
- Vuex Class
- Nuxt Class Component