Nuxt Property Decorator screenshot

Nuxt Property Decorator

Author Avatar Theme by Nuxt community
Updated: 20 Aug 2021
401 Stars

Property decorators for Nuxt (base on vue-property-decorator)

Categories

Overview

The Nuxt Property Decorator is a library that provides ES/TypeScript decorators for class-style Vue components in Nuxt. It is based on the Vue class component and Vue property decorator libraries, as well as the Vuex Class library. This library is fully dependent on vue-class-component.

Features

  • Nuxt specific decorators:
    • @Off - decorator of $off
    • @On - decorator of $on
    • @Once - decorator of $once
    • @NextTick - decorator of $nextTick
  • Vue specific decorators:
    • @Emit
    • @Inject
    • @InjectReactive
    • @Model
    • @ModelSync
    • @Prop
    • @PropSync
    • @Provide
    • @ProvideReactive
    • @Ref
    • @VModel
    • @Watch
  • Vuex specific decorators:
    • @State
    • @Getter
    • @Action
    • @Mutation
  • Other exports:
    • namespace
    • mixins
    • Vue Router hooks: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
    • Nuxt hooks: asyncData, fetch, fetchOnServer, head, key, layout, loading, middleware, scrollToTop, transition, validate, watchQuery
    • Vue-class Hooks: data, beforeCreate, created, beforeMount, mounted, beforeDestroy, destroyed, beforeUpdate, updated, activated, deactivated, render, errorCaptured, serverPrefetch

Installation

The installation process for the Nuxt Property Decorator is very easy. You can install it using either of the following methods:

  1. If you are using Nuxt JS, it works out of the box with Nuxt JS.
  2. If you are using Nuxt TS, it also works out of the box with Nuxt TS.

Summary

The Nuxt Property Decorator is a useful library for working with class-style Vue components in Nuxt. It provides a variety of decorators for Nuxt, Vue, and Vuex, as well as other useful features such as Vue Router hooks and Nuxt hooks. The installation process is straightforward, making it easy to incorporate into your Nuxt projects.