ReactVFor

ReactVFor is a Vite/React plugin that allows you to use Vue-like v-for syntax in React components.

With this plugin, you can write loops in JSX like this:

<ul>
  <li v-for="item, i in items">{i} - {item}</li>
</ul>

The plugin automatically transforms it into standard React JSX:

<ul>
  {items.map((item, i) => (
    <li key={i}>{i} - {item}</li>
  ))}
</ul>

Installation

npm install react-vfor
# or
yarn add react-vfor

Usage

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import VForPlugin from 'react-vfor'

export default defineConfig({
  plugins: [react(), VForPlugin()],
})

Example Component

import React from 'react'

function App() {
  const items = ["Apple", "Banana", "Cherry"]

  return (
    <ul>
      <li v-for="item, i in items">{i} - {item}</li>
    </ul>
  )
}

export default App

After transformation, it becomes:

function App() {
  const items = ["Apple", "Banana", "Cherry"]

  return (
    <ul>
      {items.map((item, i) => (
        <li key={i}>{i} - {item}</li>
      ))}
    </ul>
  )
}

Features

• Vue-like v-for syntax in React JSX
• Supports item, index in items syntax
• Automatically adds key if not present
• Works with Vite and React projects