Bundler Integration

To enable the zero-runtime transformations, you must include the vRPC plugin in your bundler configuration. vRPC uses unplugin, which means it supports all major build tools with a consistent API.

⚡ Vite

import { defineConfig } from 'vite'
import { vitePlugin as vRPC } from 'vrpc/plugins'

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

📦 Webpack

const { webpackPlugin: vRPC } = require('vrpc/plugins')

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

🌀 Rollup

import { rollupPlugin as vRPC } from 'vrpc/plugins'

export default {
  plugins: [vRPC()],
}

⚛️ Next.js

vRPC works perfectly with both App Router and Pages Router. Since Next.js uses Webpack, you can register the plugin in your next.config.js.

/** @type {import('next').NextConfig} */
const { webpackPlugin: vRPC } = require('vrpc/plugins')

const nextConfig = {
  webpack: (config) => {
    config.plugins.push(vRPC())
    return config
  },
}

module.exports = nextConfig

🚀 Astro

Astro users can easily integrate vRPC by adding the Vite plugin to their astro.config.mjs:

import { defineConfig } from 'astro/config'
import { vitePlugin as vRPC } from 'vrpc/plugins'

export default defineConfig({
  vite: {
    plugins: [vRPC()],
  },
})

⚡ Esbuild

For high-performance CLI tools or workers, use the esbuild plugin:

import { build } from 'esbuild'
import { esbuildPlugin as vRPC } from 'vrpc/plugins'

build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/index.js',
  plugins: [vRPC()],
}).catch(() => process.exit(1))

---

🔬 How the Plugin Works

The plugin scans your source code for identifiers that match the client names in your vrpc.yaml. When it finds a call like api.createOrder(...), it:

1. Analyzes: Verifies the method exists in the generated metadata.
2. Inlines: Replaces the call with a statically optimized executor that has the endpoint and method baked in.
3. Purges: Strips out all development-only metadata and logic from the final bundle.

WARNING

The plugin relies on dot-access syntax (api.method). If you destructure the client (e.g., const { method } = api), the plugin will not be able to track the call site for optimization, and you may end up with a larger bundle.