vite-jsx

Help use directives such as v-if in the jsx of vite

Usage

Run npm install vite-jsx

or yarn add vite-jsx

Add to vite.config.js

import { createJsxPlugin } from "vite-jsx/plugin"

 module.exports = {
  plugins: [createJsxPlugin()],
  ...
}

Directives

• v-if

• v-else-if

• v-else

• v-show

• v-text

• v-html

• v-model

  modifiers : sync, number, trim, lazy

  example : v-model_value = v-model:value

  v-model_trim_number = v-model.trim.number

IntelliSense

add to your *.d.ts

declare namespace JSX {
 interface IntrinsicAttributes {
   ['v-if']?: unknown
   ['v-else-if']?: unknown
   ['v-else']?: unknown
   ['v-show']?: unknown
   ['v-html']?: unknown
   ['v-text']?: unknown
   ['v-model']?: unknown
 }
}

TODO

• performance optimization