Vite

Use the Vite plugins to inject the agent script and mount the Vibe server routes:

import { defineConfig } from "vite";
import { viteVibeServer } from "@vibenv/vite-plugins/vite-vibe-server.js";
import { relativeAgentPlugin } from "@vibenv/vite-plugins/relative-agent-plugin.js";

export default defineConfig({
  plugins: [viteVibeServer(), relativeAgentPlugin()]
});

relativeAgentPlugin() defaults to /vibeagent.js.

Webpack

Mount the Vibe server on the dev server and inject the agent script tag into HTML:

const { WebpackVibeServerPlugin } = require("@vibenv/webpack-plugins/webpack-vibe-server.js");
const { RelativeAgentWebpackPlugin } = require("@vibenv/webpack-plugins/relative-agent-webpack-plugin.js");
const { WebpackVibeAgentHandlerPlugin } = require("@vibenv/webpack-plugins/webpack-vibe-agent-handler-plugin.js");

module.exports = {
  plugins: [
    new WebpackVibeServerPlugin(),
    new RelativeAgentWebpackPlugin("/vibeagent.js"),
    new WebpackVibeAgentHandlerPlugin({ route: "/vibeagent.js" })
  ]
};

WebpackVibeAgentHandlerPlugin() serves the built agent bundle at the same URL injected by RelativeAgentWebpackPlugin() (default /vibeagent.js).

Vue

vue-plugin-extract-files adds file metadata attributes to component root elements when __file is available:

import { createApp } from "vue";
import VuePluginExtractFiles from "@vibenv/framework-plugins/vue-plugin-extract-files.js";

const app = createApp(App);
app.use(VuePluginExtractFiles);

By default it writes:

• data-component-file
• data-component-name

Nuxt 4

nuxt4-vibenv-module injects a script tag into Nuxt's head configuration:

import { nuxt4VibenvModule } from "@vibenv/framework-plugins/nuxt4-vibenv-module.js";

export default defineNuxtConfig({
  modules: [nuxt4VibenvModule({ src: "/src/main.ts" })]
});