vue2, compilation error when using decorators in the options API

[cz1997-start]

Describe the bug

<script> import { handlerError } from '@/utils/util/decorator' export default { methods: { @handlerError() handleClick() { console.log('点击了') throw new Error('错误') }, }, } </script>

Reproduction

无

Steps to reproduce

No response

System Info

无

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[github-actions]

Hello @cz1997-start. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[cz1997-start]

Here's an example of minimal recurrence.https://stackblitz.com/edit/vitejs-vite-acuxcgpc?file=src%2FApp.vue

[licoded]

Hi @cz1997-start,

I looked into the reproduction you provided. The issue arises because decorators are a feature that isn't supported out-of-the-box with the standard Vue 2 Options API syntax, especially in a modern build tool like Vite. They require a specific TypeScript and class-based component setup.

I've forked your StackBlitz and configured it to work correctly.

working solution here: https://stackblitz.com/github/licoded/vite-vue-class-decorators/tree/vue2
A tsconfig.json file was added, and "experimentalDecorators": true, was configed in it to support class Decorators syntax.

I added vue-class-component and vue-property-decorator two packages.

• vue-class-component: This is the fundamental library that allows you to define a Vue component as a class.
• vue-property-decorator: This library is built on top of vue-class-component and provides helpful decorators like @Component, @Prop, @Watch, etc., making the class syntax more declarative and powerful.

PS: A Vue3 + Vite version is also available at https://stackblitz.com/github/licoded/vite-vue-class-decorators/tree/vue3, which uses vue-facing-decorator instead.

[cz1997-start]

@licoded I am currently migrating from Vue CLI to Vite, working with Vue 2. My project employs decorators on nearly every Vue page, and converting these to class components may not be the most suitable approach.

[cz1997-start]

I have a query: why does Vue CLI support this syntax? I initially intended to write my own Babel plugin to handle it, but I discovered that Babel itself cannot recognise this approach of using decorators within the options API. Consequently, I am currently investigating at which stage Vue implements this compatibility handling, before considering more suitable approaches for migrating my project. If you happen to know, I'd be grateful if you could enlighten me. Thank you.

[licoded]

@cz1997-start That's an interesting question. Could you please provide a minimal, working example using Vue 2 and Vue CLI that demonstrates this feature? Once I can see how it's handled there, I'd be happy to investigate what it would take to migrate this capability to Vite. Thanks!

[cz1997-start]

@licoded This is a simple example of using decorators within the options API in Vue and Vue CLI. https://github.com/cz1997-start/vue2-decorator-options