https://github.com/vitejs/vite-plugin-vue2-jsx

Vite plugin for Vue 2.7 JSX support
https://github.com/vitejs/vite-plugin-vue2-jsx

Last synced: 4 months ago
JSON representation

Vite plugin for Vue 2.7 JSX support

• Host: GitHub
• URL: https://github.com/vitejs/vite-plugin-vue2-jsx
• Owner: vitejs
• License: mit
• Created: 2022-07-08T09:18:27.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-31T08:08:40.000Z (8 months ago)
• Last Synced: 2024-09-28T23:01:17.960Z (4 months ago)
• Language: TypeScript
• Size: 433 KB
• Stars: 57
• Watchers: 6
• Forks: 6
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vite - v2 - Official Vue 2 JSX support. (Plugins / Vue)
• awesome-vite - v2 - Official Vue 2 JSX support. (Plugins / Vue)

README

        
# @vitejs/plugin-vue2-jsx [![npm](https://img.shields.io/npm/v/@vitejs/plugin-vue2-jsx.svg)](https://npmjs.com/package/@vitejs/plugin-vue2-jsx)

> [!CAUTION]

> Vue 2 has reached EOL, and this project is no longer actively maintained.

---

Provides Vue 2 JSX & TSX support with HMR.

```js

// vite.config.js

import vueJsx from '@vitejs/plugin-vue2-jsx'

export default {

  plugins: [

    vueJsx({

      // options are passed on to @vue/babel-preset-jsx

    })

  ]

}

```

## Options

### include

Type: `(string | RegExp)[] | string | RegExp | null`

Default: `/\.[jt]sx$/`

A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files the plugin should operate on.

### exclude

Type: `(string | RegExp)[] | string | RegExp | null`

Default: `undefined`

A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files to be ignored by the plugin.

> See [@vue/babel-preset-jsx](https://github.com/vuejs/jsx-vue2/tree/dev/packages/babel-preset-jsx#readme) for other options.

## HMR Detection

This plugin supports HMR of Vue JSX components. The detection requirements are:

- The component must be exported.

- The component must be declared by calling `defineComponent` via a root-level statement, either variable declaration or export declaration.

### Supported patterns

```jsx

import { defineComponent } from 'vue'

// named exports w/ variable declaration: ok

export const Foo = defineComponent({})

// named exports referencing variable declaration: ok

const Bar = defineComponent({ render() { return 
Test
 }})

export { Bar }


// default export call: ok

export default defineComponent({ render() { return 
Test
 }})


// default export referencing variable declaration: ok

const Baz = defineComponent({ render() { return 
Test
 }})

export default Baz

```


### Non-supported patterns

```jsx

// not using `defineComponent` call

export const Bar = { ... }

// not exported

const Foo = defineComponent(...)

```

## Unfinished Features

- SSR support

- Share the same HMR runtime with `@vitejs/plugin-vue2`