Getting Started

vue-jsx-vapor is a Vapor Mode of vue-jsx. It supports all directives and most macros of Vue.

We assume you are already familiar with the basic usages of Vue before you continue.

Requirements

• Vue >= v3.6.
• VSCode extension TS Macro and install @ts-macro/tsc instead of tsc to typecheck.

  // package.json
  {
    "scripts": {
      "typecheck": "tsmc --noEmit"
      // ...
    }
  }

Install

# plugin
pnpm add vue-jsx-vapor

# runtime
pnpm add vue@3.6.0-alpha.2

Setup

vite.config.ts

import { defineConfig } from 'vite'
import vueJsxVapor from 'vue-jsx-vapor/vite'

export default defineConfig({
  plugins: [
    vueJsxVapor({
      macros: true,
    }),
  ],
})

Typescript

Configure tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "vue-jsx-vapor",
    // ...
  }
}

Volar plugin

Since vue-jsx-vapor supports Vue directives and Vue macros, so need to install the TS Macro VSCode plugin to load the vue-jsx-vapor/volar plugin for type support.

The TS Macro VSCode plugin will automatically loads the vue-jsx-vapor/volar by analyzing vite.config.ts and shares the user configuration of the vue-jsx-vapor/vite plugin, without the need to manually configure ts-macro.config.ts.

manually configuration

ts-macro.config.ts

import vueJsxVapor from 'vue-jsx-vapor/volar'

export default {
  plugins: [
    vueJsxVapor({
      macros: true,
    }),
  ],
}

Templates

• vitesse-jsx-vapor