# VPT

[![npm version](https://img.shields.io/npm/v/vite-plugin-taro.svg)](https://www.npmjs.com/package/vite-plugin-taro)
[![npm downloads](https://badgen.net/npm/dm/vite-plugin-taro)](https://www.npmjs.com/package/vite-plugin-taro)
![Vite](https://img.shields.io/npm/dependency-version/vite-plugin-taro/peer/vite?label=Vite)
[![CI](https://github.com/sep2/vite-plugin-taro/actions/workflows/publish.yml/badge.svg?branch=main&event=push)](https://github.com/sep2/vite-plugin-taro/actions/workflows/publish.yml)
[![coverage](https://img.shields.io/badge/coverage-100%25-brightgreen.svg)](https://github.com/sep2/vite-plugin-taro/actions/workflows/publish.yml)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)

[简体中文](README.md) | English

Build WeChat, Alipay, and TikTok Mini Programs, as well as Web apps, with Vite 8, React 19, Taro 4, and Tailwind CSS v4.

Website: <https://vpt.js.org>

> **AI-assisted development is recommended:** Follow the [VPT AI development guide](https://vpt.js.org/guides/ai/) and let a coding assistant create, develop, test, and validate your app.

## Quick Start

```sh
npm create vite-taro@latest my-app
```

Or use pnpm (recommended):

```sh
pnpm --config.minimum-release-age=0 create vite-taro@latest my-app
```

Continue with the [Quick Start guide](https://vpt.js.org/guides/quick-start/).

### Hot Reload in Mini Program DevTools

<video src="https://github.com/user-attachments/assets/c8289e1e-d8ad-429f-a0d9-a40656b4962a" controls autoplay muted loop playsinline width="100%"></video>

- **Vite 8 + React 19** Build one codebase for WeChat, Alipay, and TikTok Mini Programs, as well as Web.
- **Hot reload** Preserve App data, the active page, React component state, and input state while editing.
- **Automatic subpackages** Use standard static and dynamic imports while vpt plans WeChat Mini Program subpackages automatically.
- **Tailwind CSS v4 ready** Write utility classes directly; styles adapt automatically for WeChat and Web.
- **Built on Taro, beyond Taro** Use Taro components and APIs without the old webpack pipeline.
- **Skyline ready** Use WeChat Skyline rendering globally or per page.

## Demo

See the [Loan Genius Demo](https://github.com/sep2/vite-plugin-taro/blob/main/demo/loan-genius/README.en.md).

<img src="https://raw.githubusercontent.com/sep2/vite-plugin-taro/main/demo/loan-genius/screenshots/demo.webp" alt="Loan Genius screenshot" width="320" />

## Sponsor

VPT is sponsored by [weapp.dev](https://weapp.dev). Thank you to our sponsor for supporting open-source development.

weapp.dev builds an open, composable modern toolchain for Mini Program and Web development.

## Documentation

- [Quick Start](https://vpt.js.org/guides/quick-start/)
- [AI-assisted development](https://vpt.js.org/guides/ai/)
- [Styles](https://vpt.js.org/guides/styles/)
- [Automatic subpackages](https://vpt.js.org/guides/automatic-subpackages/)
- [Native components](https://vpt.js.org/guides/native-components/)
- [Hot module replacement](https://vpt.js.org/guides/hot-module-replacement/)
- [Configuration options](https://vpt.js.org/guides/configuration/)
- [Conditional compilation](https://vpt.js.org/guides/conditional-directives/)
- [Skyline mode](https://vpt.js.org/guides/skyline-mode/)
- [Migrate from Taro](https://vpt.js.org/guides/migrate-from-taro/)
- [Module system](https://vpt.js.org/references/module-system/)
- [Hot module replacement internals](https://vpt.js.org/references/hmr-implementation/)
- [Repository management](https://vpt.js.org/references/repository-management/)

## License

MIT