{"id":24892,"library":"agentation-vue","title":"Agentation Vue","description":"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.","status":"active","version":"0.2.14","language":"javascript","source_language":"en","source_url":"https://github.com/Blaked84/agentation-vue","tags":["javascript","vue","agentation","annotation","ai","feedback","vue-demi","typescript"],"install":[{"cmd":"npm install agentation-vue","lang":"bash","label":"npm"},{"cmd":"yarn add agentation-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add agentation-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for Vue 2.7 or 3.3+","package":"vue","optional":false},{"reason":"Used internally for Vue 2/3 compatibility","package":"vue-demi","optional":true}],"imports":[{"note":"ESM-only package; CommonJS require() not supported.","wrong":"const AgentationVuePlugin = require('agentation-vue')","symbol":"AgentationVuePlugin","correct":"import { AgentationVuePlugin } from 'agentation-vue'"},{"note":"The component is globally registered by the plugin; no separate import needed. CSS import is required.","wrong":"import 'agentation-vue/dist/style.css'","symbol":"AgentationVue (component)","correct":"import 'agentation-vue/style.css'"},{"note":"Plugin is a named export, not a default export.","wrong":"import AgentationVuePlugin from 'agentation-vue'","symbol":"Vue 2.7 usage","correct":"import { AgentationVuePlugin } from 'agentation-vue'\nVue.use(AgentationVuePlugin)"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport App from './App.vue'\nimport { AgentationVuePlugin } from 'agentation-vue'\nimport 'agentation-vue/style.css'\n\nconst app = createApp(App)\napp.use(AgentationVuePlugin)\napp.mount('#app')","lang":"typescript","description":"Import and register the plugin in your main entry file for Vue 3."},"warnings":[{"fix":"Wrap your template content in a <div>.","message":"Vue 2 templates require a single root element when using the <agentation-vue> component.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Upgrade to >=0.2.0 for full features.","message":"Package version 0.1.0 had limited Chrome extension support and lacked Vue component hierarchy detection.","severity":"deprecated","affected_versions":"0.1.0"},{"fix":"Call app.use(AgentationVuePlugin) before .mount().","message":"The plugin must be registered before mounting the app; otherwise annotations may not work.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use Vue.use(AgentationVuePlugin) and ensure a single root element in template.","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.","error":"Component is missing template or render function"},{"fix":"Use import 'agentation-vue/style.css' (no dist prefix).","cause":"CSS import path is incorrect or missing; style file not resolved.","error":"Cannot find module 'agentation-vue/style.css'"},{"fix":"Use import { AgentationVuePlugin } from 'agentation-vue'.","cause":"Using CommonJS require() with module's default export; exports are named.","error":"TypeError: Cannot read properties of undefined (reading 'use')"},{"fix":"Use import { AgentationVuePlugin } from 'agentation-vue'.","cause":"The plugin is imported as default export instead of named export.","error":"AgentationVuePlugin is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}