https://github.com/ilyasemenov/nuxt3-class-component

Nuxt3 replacement for nuxt-property-decorator
https://github.com/ilyasemenov/nuxt3-class-component

nuxt3

Last synced: 11 days ago
JSON representation

Nuxt3 replacement for nuxt-property-decorator

• Host: GitHub
• URL: https://github.com/ilyasemenov/nuxt3-class-component
• Owner: IlyaSemenov
• License: mit
• Created: 2023-05-20T12:58:33.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-10-29T03:04:33.000Z (19 days ago)
• Last Synced: 2024-10-29T04:19:25.837Z (19 days ago)
• Topics: nuxt3
• Language: TypeScript
• Homepage:
• Size: 137 KB
• Stars: 22
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# nuxt3-class-component

A successor to [nuxt-property-decorator](https://github.com/nuxt-community/nuxt-property-decorator) for Nuxt 3, based on [vue-facing-decorator](https://github.com/facing-dev/vue-facing-decorator).

Unlike the original `nuxt-property-decorator`, this package is implemented as a Nuxt module. This is because it uses `defineNuxtComponent` internally, which doesn't work outside of Nuxt compilation context.

## Quick Setup

Install:

```sh

npm install nuxt3-class-component vue-facing-decorator

```

Add `nuxt3-class-component` to the `modules` section of `nuxt.config.ts`:

```ts

export default defineNuxtConfig({

  modules: ["nuxt3-class-component"],

})

```

## Drop-in replacement for `nuxt-property-decorator`

Your previous Nuxt2 components will work automagically:

```vue

// This pseudo-package is provided by nuxt3-class-component module

import { Component, Vue } from "nuxt-property-decorator"

@Component({

  async asyncData() {

    return { value: 42 }

  },

})

export default class App extends Vue {

  value!: number

}

  
value = {{ value }}


```

## New syntax

It is advised to use the auto-imported `NuxtComponent` and the underlying `vue-facing-decorator` instead:

```vue

import { Vue } from "vue-facing-decorator"

@NuxtComponent({

  async asyncData() {

    return { value: 42 }

  },

})

export default class App extends Vue {

  value!: number

}

  
value = {{ value }}


```

## Begging

If you find this module useful, please consider a small one-off donation with the ❤️ Sponsor button.