How to configure vue application properly to use decorator pattern?

[maifeeulasad]

I'm trying to use a decorator pattern for convenience in Vue.

Here is my babel.config.cjs:

module.exports = {
    presets: ["@babel/preset-env"],
    plugins: [
        ["@babel/plugin-proposal-decorators", { version: "legacy" }],
        ["@babel/plugin-proposal-class-properties", { loose: true }]
    ]
};

And here is the vite.config.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import babel from 'vite-plugin-babel';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    babel({
      babelConfig: {
        babelrc: false,
        configFile: false,
        presets: [
          ["@babel/preset-env", { loose: true }],
        ],
        plugins: [
          ["@babel/plugin-proposal-decorators", { version: "legacy" }],
          ["@babel/plugin-proposal-class-properties", { loose: true }],
        ],
      },
    }),

  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

After configuring all these, when I try to do this inside a IDBOperations.ts file:

import { DataClass, KeyPath } from 'idb-ts/lib';

@DataClass()
export class User {
  @KeyPath()
  name: string;
  age: number;
  cell?: string;
  address: string;

  constructor(name: string, age: number, address: string, cell?: string) {
    this.name = name;
    this.age = age;
    this.address = address;
    this.cell = cell;
  }
}

But I am getting Uncaught SyntaxError: Invalid or unexpected token (at IDBOperations.ts:2:1)

I'm using vue of version ^3.5.13.

How can I configure my vue application properly to use these plugin with decorator?

Here is my full code: https://github.com/maifeeulasad/idb-ts/tree/41c98a3ab455aa7cd9830360058151b9325ea919/examples/vue

[maifeeulasad]

Putting it here if someone struggles with it in future:

Since you are using TypeScript, you need to add the experimentalDecorators field in the tsconfig.app.json file as follows:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "experimentalDecorators": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

The documentation on Decorators can be found here: decorators.

The Vite documentation also states that the experimentalDecorators field affects the transpilation result: vite#typescript

ref: https://stackoverflow.com/a/79482960/10305444