# nuxt-property-decorator

> Property decorators for Nuxt

Latest version **2.9.1** (published 2021-01-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install nuxt-property-decorator
pnpm add nuxt-property-decorator
yarn add nuxt-property-decorator
bun add nuxt-property-decorator
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.9.1 |
| Published | 2021-01-15 |
| First published | 2017-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 37 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 397 |
| Author | davidbernal |
| Maintainers | atinux, davidbernal, husayt, breakingrobot |
| Keywords | vue, typescript, nuxt, decorator |

## Links

- npm: https://www.npmjs.com/package/nuxt-property-decorator
- Repository: https://github.com/nuxt-community/nuxt-property-decorator
- Homepage: https://github.com/nuxt-community/nuxt-property-decorator#readme
- Issues: https://github.com/nuxt-community/nuxt-property-decorator/issues
- npm.io page: https://npm.io/package/nuxt-property-decorator

## Dependencies (4)

- [vuex-class](https://npm.io/package/vuex-class.md) ^0.3.2
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.2.6
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^9.0.0
- [vuex-module-decorators](https://npm.io/package/vuex-module-decorators.md) ^1.0.1

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 2.9.1 (latest) — 2021-01-15
- 2.8.8 — 2020-09-23
- 2.8.7 — 2020-09-23
- 2.8.6 — 2020-09-23
- 2.8.3 — 2020-09-18
- 2.8.1 — 2020-09-18
- 2.7.2 — 2020-04-21
- 2.7.1 — 2020-04-21
- 2.5.1 — 2020-02-17
- 2.5.0 — 2019-10-18
- 2.4.1 — 2019-10-17
- 2.4.0 — 2019-09-02
- 2.3.0 — 2019-06-02
- 2.1.3 — 2019-02-26
- 2.0.1 — 2019-02-08
- … 13 more at https://npm.io/package/nuxt-property-decorator/versions

## README

# Nuxt Property Decorator

<p align="center">
<a href="https://david-dm.org/nuxt-community/nuxt-property-decorator">
    <img alt="" src="https://david-dm.org/nuxt-community/nuxt-property-decorator/status.svg?style=flat-square">
</a>
<br>
<a href="https://npmjs.com/package/nuxt-property-decorator">
    <img alt="" src="https://img.shields.io/npm/v/nuxt-property-decorator/latest.svg?style=flat-square">
</a>
<a href="https://npmjs.com/package/nuxt-property-decorator">
    <img alt="" src="https://img.shields.io/npm/dt/nuxt-property-decorator.svg?style=flat-square">
</a>
</p>

Handy ES / TypeScript decorators for class-style Vue components in Nuxt (based on [Vue class component](https://github.com/vuejs/vue-class-component)) and Property decorators for Vue (bases on [Vue Property Decorator](https://github.com/kaorun343/vue-property-decorator)) and Vuex (based on [Vuex Class](https://github.com/ktsn/vuex-class/))

This library fully depends on [vue-class-component](https://github.com/vuejs/vue-class-component).

## License

MIT License

## Install

Installation is very easy

```bash
npm i -S nuxt-property-decorator
```

or

```bash
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 \$nextTick

- **exported from** [`vue-class-component`](https://github.com/vuejs/vue-class-component)
  - `@Component`
- **exported from** [`vue-property-decorator`](https://github.com/kaorun343/vue-property-decorator)

  - [`@Emit`](https://github.com/kaorun343/vue-property-decorator/#Emit)
  - [`@Inject`](https://github.com/kaorun343/vue-property-decorator/#Provide)
  - [`@InjectReactive`](https://github.com/kaorun343/vue-property-decorator/#ProvideReactive)
  - [`@Model`](https://github.com/kaorun343/vue-property-decorator/#Model)
  - [`@ModelSync`](https://github.com/kaorun343/vue-property-decorator#-modelsyncpropname-string-event-string-options-propoptions--constructor--constructor---decorator)
  - [`@Prop`](https://github.com/kaorun343/vue-property-decorator/#Prop)
  - [`@PropSync`](https://github.com/kaorun343/vue-property-decorator/#PropSync)
  - [`@Provide`](https://github.com/kaorun343/vue-property-decorator/#Provide)
  - [`@ProvideReactive`](https://github.com/kaorun343/vue-property-decorator/#ProvideReactive)
  - [`@Ref`](https://github.com/kaorun343/vue-property-decorator/#Ref)
  - [`@VModel`](https://github.com/kaorun343/vue-property-decorator#-vmodelpropsargs-propoptions-decorator)
  - [`@Watch`](https://github.com/kaorun343/vue-property-decorator/#Watch)

- **exported from** [`vuex-class`](https://github.com/ktsn/vuex-class)

  - `@State`
  - `@Getter`
  - `@Action`
  - `@Mutation`

- **exported from** [`vuex-module-decorators`](https://github.com/championswimmer/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

```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.
Also this library needs to have `emitDecoratorMetadata` set to `true` for this to work.

## Useful links

See also:

- [Vue Property Decorator](https://github.com/kaorun343/vue-property-decorator)
- [Vue class component](https://github.com/vuejs/vue-class-component)
- [Vuex Class](https://github.com/ktsn/vuex-class/)
- [Nuxt Class Component](https://github.com/nuxt-community/nuxt-class-component)

---
_Source: https://npm.io/package/nuxt-property-decorator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._