Getting started

Install with Vue

Passback adds a small button to your site while you develop. Click it, click anything on the page, and write what should change. The comment goes to the coding agent you already have open. In development it carries the Vue component names and the .vue file the element comes from, but no line number.

Before you start

A Vue 3 project that runs on Vite 7 or 8.
Node 22 or later.
One of Claude Code, Codex or Cursor, opened in the project.

Install

In your project folder, add the two packages:
```
npm i -D passback @passback/vite-plugin
```
Set the project up:
```
npx passback init --apply
```
Check vite.config.ts. The passback() plugin sits beside vue(). If init could not edit the config safely, it leaves the file as it is and prints the line to add by hand:
```
// vite.config.ts
import vue from '@vitejs/plugin-vue';
import passback from '@passback/vite-plugin';

export default {
  plugins: [vue(), passback()],
};
```
Start your dev server as usual, or restart it if it was running. The Passback button appears in the bottom right corner.
Restart your agent in the project and approve the passback server when it asks. Then start a session: type /passback in Claude Code or Cursor, $passback in Codex. The agent waits for your first comment.

What a comment carries

In development, the Vue component names and the .vue file. There is no line number.
A production build carries neither. They come from development builds only.

Compare frameworks in What a comment carries.

Comments from a build

In development a comment goes to the coding agent. With mode: 'relay', a siteKey and an endpoint, a build files comments to the hosted relay:

passback({
  mode: 'relay',
  siteKey: '…',
  endpoint: '…',
});

For the options, see Install with Vite.

Next: Install with SvelteKit