Agentation Vue

0.2.14 verified Fri May 01 auth: no javascript

A community-maintained Vue adaptation of Agentation (v0.2.14), providing visual feedback and annotation capabilities for AI coding agents. Compatible with Vue 2.7 and Vue 3.3+. Released frequently with active development. Key differentiators: detects Vue component hierarchies, supports Chrome extension injection, session-persistent annotations, and forensic mode for AI debugging. Not affiliated with the original Agentation project.

Common errors

error Component is missing template or render function ↓

cause Vue 2.7 compatibility issue: the <agentation-vue> component may not be properly registered in Vue 2 if the plugin is not used correctly.

fix

Use Vue.use(AgentationVuePlugin) and ensure a single root element in template.

error Cannot find module 'agentation-vue/style.css' ↓

cause CSS import path is incorrect or missing; style file not resolved.

fix

Use import 'agentation-vue/style.css' (no dist prefix).

error TypeError: Cannot read properties of undefined (reading 'use') ↓

cause Using CommonJS require() with module's default export; exports are named.

fix

Use import { AgentationVuePlugin } from 'agentation-vue'.

error AgentationVuePlugin is not a function ↓

cause The plugin is imported as default export instead of named export.

fix

Use import { AgentationVuePlugin } from 'agentation-vue'.

Warnings

gotcha Vue 2 templates require a single root element when using the <agentation-vue> component. ↓

fix Wrap your template content in a <div>.

deprecated Package version 0.1.0 had limited Chrome extension support and lacked Vue component hierarchy detection. ↓

fix Upgrade to >=0.2.0 for full features.

gotcha The plugin must be registered before mounting the app; otherwise annotations may not work. ↓

fix Call app.use(AgentationVuePlugin) before .mount().

Install

npm install agentation-vue

yarn add agentation-vue

pnpm add agentation-vue

Imports

AgentationVuePlugin

wrong

const AgentationVuePlugin = require('agentation-vue')

correct

import { AgentationVuePlugin } from 'agentation-vue'

ESM-only package; CommonJS require() not supported.

AgentationVue (component)
wrong
```
import 'agentation-vue/dist/style.css'
```
correct
```
import 'agentation-vue/style.css'
```
The component is globally registered by the plugin; no separate import needed. CSS import is required.

Vue 2.7 usage

wrong

import AgentationVuePlugin from 'agentation-vue'

correct

import { AgentationVuePlugin } from 'agentation-vue'
Vue.use(AgentationVuePlugin)

Plugin is a named export, not a default export.

Quickstart

Import and register the plugin in your main entry file for Vue 3.

import { createApp } from 'vue'
import App from './App.vue'
import { AgentationVuePlugin } from 'agentation-vue'
import 'agentation-vue/style.css'

const app = createApp(App)
app.use(AgentationVuePlugin)
app.mount('#app')