Install #

Install dependencies #

Considering you already have a working Vue 3 project, you'll have to install Vue DIOD with its dependencies: reflect-metadata and obviously diod.

npm #

npm install -s vue-diod diod reflect-metadata

yarn #

yarn add vue-diod diod reflect-metadata

Typescript configuration #

Modify your tsconfig.jsonto include the following settings:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Vite configuration #

As stated in the Vite GitHub issues (here):

The emitDecoratorMetadata flag is intentionally not supported.

To enable this support, we have to disable esbuild and use SWC instead, thanks to the rollup-plugin-swc3 package.

npm install --save-dev @swc/core rollup-plugin-swc3

# OR

yarn add -D @swc/core rollup-plugin-swc3

Then, in our vite.config.js or vite.config.ts file, we simply have to add:

import { defineConfig } from 'vite';
import swc from 'rollup-plugin-swc3';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  // ...

  plugins: [
    swc({
      jsc: {
        parser: {
          syntax: 'typescript',
          dynamicImport: true,
          decorators: true,
        },
        target: 'es2021',
        transform: {
          decoratorMetadata: true,
        },
      },
    }),
    vue(),
  ],
  esbuild: false,
});