Support decorators in `.vue` file.

[ruojianll]

Related plugins

• [X] plugin-vue

• [ ] plugin-vue-jsx

Description

In newest npm create vue@latest project, we could use decorators after set "experimentalDecorators": true in standalone .ts files. But it couldn't be transformed in .vue files in <script lang="ts"></script>.

I advice to support decorators in .vue files directly or with "experimentalDecorators": true.

Suggested solution

Support decorators in .vue files.

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sxzz]

Considering it as a bug. Please provide a minimal reproduction to continue the issue. Thanks.

Why reproduction is required

[ruojianll]

1. npm create vue@latest
2. cd your-project
3. npm install
4. Set "experimentalDecorators": true in tsconfig.app.json
5. npm run dev
6. Change src/HomeView.vue's script block.

   
   <script setup lang="ts">
   import TheWelcome from '../components/TheWelcome.vue'

function deco(){ console.log('deco works') } @deco class MyClass{}

There is an error in browser console `Uncaught SyntaxError: Invalid or unexpected token`.
It should show `deco works`.

[sxzz]

It could be related to Vite dev server, since it works on build mode vite build.

[sxzz]

This is because Vite's esbuild syntax transformation occurs before the Vue plugin, and esbuild does not recognize Vue SFC, so it is ignored.

[ruojianll]

How about this going?