AI Plugin Indexfrontend framework
Vue MCP servers and skills
There are 123 ways to connect Vue to Claude, ChatGPT, Cursor and other AI assistants; these are the 100 with the highest scores. The most used is Server Basic Vue (3.0k GitHub stars).
Best Vue MCP servers, compared →Most used
Server Basic Vue
modelcontextprotocol
83Basic MCP App Server example using Vue
AFB
docus-playgroundnuxt-content
80Sample skill for testing the Docus agent skills discovery feature. Use to verify that /.well-known/skills/ routes work correctly.
AAA
Nitro MCP Toolkit
nuxt-modules
80Framework-agnostic MCP server toolkit built directly on Nitro v3 and h3-mcp.
AAB
vue-wrapper-devhandsontable
78Use when developing or modifying the @handsontable/vue3 wrapper package - Vue 3 SFC components, deep watchers, and provide/inject patterns for settings propagation
AFA
Proteus Vue MCP
kviewui163
78G-36 B1 MCP Server（proteus-ai-agent-plan 03-mcp-server）：AI 工具标准协议核心——11 工具（search_primitives/get_primitive/list_primitives/get_design_token/check_capability/get_capability_matrix/lookup_miniprogram/validate_ir/run_conformance/generate_code/write_file）+ 5
AC
Rsbuild Plugin Vue MCP
BrightX
77Rsbuild/Rspack MCP plugin based on Vue DevTools
BAD
MCP servers (27)
- 1Server Basic Vue modelcontextprotocolBasic MCP App Server example using Vue83
- 2Nitro MCP Toolkit nuxt-modulesFramework-agnostic MCP server toolkit built directly on Nitro v3 and h3-mcp.80
- 3Proteus Vue MCP kviewui163 · AI and LLM toolsG-36 B1 MCP Server（proteus-ai-agent-plan 03-mcp-server）：AI 工具标准协议核心——11 工具（search_primitives/get_primitive/list_primitives/get_design_token/check_capability/get_capability_matrix/lookup_miniprogram/validate_ir/run_conformance/generate_code/write_file）+ 578
- 4Rsbuild Plugin Vue MCP BrightXRsbuild/Rspack MCP plugin based on Vue DevTools77
- 5Nuxt Docs mhaibaraai · CommunicationModern Nuxt 4 documentation theme with auto-generated component docs, AI chat assistant, MCP server, and complete developer experience optimization.74
- 6Nuxt wervt-app · DatabasesNuxt module for apps hosted on wervt: database, live data, MCP and runtime setup.72
- 7Nuxt MCP Dev antfuMCP server from your Nuxt dev server helping models to understand your Nuxt app better.70
- 8Nuxt MCP antfuMCP server helping models to understand your Nuxt app better.70
- 9Web Vue MCP liunnn1994 · Knowledge and memoryModel Context Protocol (MCP) server for the SD Design Vue component library69
- 10Ix MCP Vue siemens-element-botiX MCP server for Vue68
- ADYour product hereThis row is seen by people browsing Vue tools. Book it from $249 a month.See prices →
- 11Vue beany-vu · DesignVue 3 charts - SVG, canvas & WebGPU rendering, accessible by default, with an LLM-ready data context. Thin wrapper over the framework-agnostic @michi-vz engine.63
- 12Vite Plugin Vue MCP webfansplzMCP server helping models to understand your Vue app better.62
- 13nuxt-i18n-mcp fabkhoMCP server for managing i18n translations in Nuxt projects.58
- 14Nuxt Volcano arashsheyda · AI and LLM toolsNuxt module for Volcano Agent SDK - build AI agents with LLM reasoning and MCP tools48
- 15Vue MCP syncfusion-javascriptSyncfusion Vue MCP Server48
- 16Vue MCP Next dadaguai · Knowledge and memoryVue MCP Next - A modern Vue.js Model Context Protocol implementation for Vue.js applications40
- 17Nuxt AI josephanson · AI and LLM toolsExcelerate your application development with AI.36
- 18MCP Vue YamadaAoi · Cloud and DevOpsA Local MCP server for finding vue code references using Tree-sitter. Usage: npx mcp-vue [--cwd=<path>] [--level=<DEBUG|INFO|WARN|ERROR>] [--log-file=<path>] [--no-console] [--no-file]36
- 19Vite Plugin Vue MCP NikhilVermaMCP server helping models to understand your Vue app better.33
- 20Vue MCP webfansplzMCP server helping models to understand your Vue app better.30
- 21Laravel Vite Plugin Vue MCP KlipsikMCP server for your Laravel + Vue app (component tree, state, routes and Pinia), auto-attached to your laravel-vite-plugin entry. Fork of vite-plugin-vue-mcp by Arlo (@webfansplz).30
- 22Nuxt Layers MCP devin-cs · AI and LLM toolsMCP server exposing CooperCo Nuxt layer documentation as resources for AI assistants30
- 23Vite Plugin Vue MCP vilasone455MCP server helping models to understand your Vue app better.29
- 24Nuxt UI MCP katokdoescodeNuxt UI MCP Server27
- 25Vue MCP ginopoitier · Developer toolsMCP server for vue-kit — Vue SFC analysis, Pinia store inspection, TypeScript type checking, and Vite project structure tools for Claude Code.27
- 26Vue Dev Helper MCP jeff.lin · SecurityMCP server for Vue developers - compatibility check, redundancy detection, and security audit24
- 27vue-harvest virgilvoxExtract reusable component libraries and design tokens from Vue applications21
Skills (73)
- 1docus-playground nuxt-content · Developer toolsSample skill for testing the Docus agent skills discovery feature. Use to verify that /.well-known/skills/ routes work correctly.80
- 2vue-wrapper-dev handsontableUse when developing or modifying the @handsontable/vue3 wrapper package - Vue 3 SFC components, deep watchers, and provide/inject patterns for settings propagation78
- 3nuxt-site-config-skilld nuxt-modules · Developer toolsShared site configuration for Nuxt 3 modules. ALWAYS use when writing code importing \"nuxt-site-config\". Consult for debugging, best practices, or modifying nuxt-site-config, nuxt site config.73
- 4vue-typescript Mindrally · Developer toolsExpert in Vue.js TypeScript development with Vite, Pinia, and modern UI frameworks72
- 5vue-customer mmtaeeBuild customer Vue views and components while preserving the project structure.69
- 6vue-template-formatting mmtaee · Documents and filesEnforce this project's Vue template interpolation layout when creating, editing, formatting, or reviewing `.vue` files.69
- 7nuxt-pages ArtisanCloudPowerX Nuxt CRUD 页面与主题规范。68
- 8vue-i18n mmtaeeMaintain customer localization and RTL behavior.66
- 9widget-vue-extract nickknissenExtract endpoint summaries from a specific Aula web widget Vue component using sourcemaps and a widget id/key (e.g. 0030 or W0030V0001). Use when user asks to inspect widget source for endpoints, request patterns, or provider hints.56
- 10source-command-build-vue-app legioncodeincBuild or extend a Vue app using current component, state, form, routing and asynchronous boundaries with explicit verification.55
- 11nuxt-enums leeovery · Developer toolsTypeScript enum pattern with Castable interface for model integration. Use when creating enums with behavior methods (colors, labels), defining fixed value sets, or integrating enums with the model casting system.50
- 12nuxt-config leeovery · Documents and filesNuxt and app configuration files. Use when configuring nuxt.config.ts, app.config.ts, environment variables, runtime config, or understanding how configuration flows through the application.50
- 13vue-tsc-skilld Bader-Idris · Developer toolsALWAYS use when writing code importing \"vue-tsc\". Consult for debugging, best practices, or modifying vue-tsc, vue tsc, language-tools, language tools.48
- 14nuxt-og-image-skilld Bader-Idris · DesignEnlightened OG Image generation for Nuxt. ALWAYS use when writing code importing \"nuxt-og-image\". Consult for debugging, best practices, or modifying nuxt-og-image, nuxt og image, og-image, og image.48
- 15vueuse-nuxt-skilld Bader-Idris · Developer toolsVueUse Nuxt Module. ALWAYS use when writing code importing \"@vueuse/nuxt\". Consult for debugging, best practices, or modifying @vueuse/nuxt, vueuse/nuxt, vueuse nuxt, vueuse.48
- 16nuxt-ui Patrity · Developer toolsFetches Nuxt UI v4 component documentation from GitHub. Use when building UI with Nuxt UI, needing component APIs, props, slots, or usage examples.43
- 17vue-custom-swipe yoonjonglyuWorkflows, conventions, and Vite build configuration for the `vue-custom-swipe` package in `packages/vue-custom-swipe`. Use when updating Vue 3 components, composables, or build artifacts.40
- 18vue-composable-creator ComeOnOliverVue Composable Creator - Auto-activating skill for Frontend Development. Triggers on: vue composable creator, vue composable creator Part of the Frontend Development skill category.38
- 19vue-component-generator ComeOnOliverVue Component Generator - Auto-activating skill for Frontend Development. Triggers on: vue component generator, vue component generator Part of the Frontend Development skill category.38
- 20nuxt-ui-tools-typescript ChronicStone · Developer toolsUse this skill for internal TypeScript work in the nuxt-ui-tools repository. Covers the repository's inference-first style, forbidden escape hatches, public API typing rules, schema-driven type design, and how to keep complex types powerful without making the codebase harder to maintain.37
- 21nuxt skeletorflet · Documents and filesNuxt auto-imports, file-based routing, server routes, data fetching (useFetch/useAsyncData), modules ecosystem, hybrid rendering, SEO with useHead, and auto-imported composables. Use when building Nuxt applications.35
- 22vue skeletorfletVue.js Composition API, SFC structure, reactivity system, directives, router, Pinia state management, slots, and transitions. Use when building Vue components or applications.35
- 23vue-component-review 535803710审查 Vue 组件质量，关注模板结构、Composition API、响应式数据、Props/Emits、生命周期、副作用清理、组件拆分和可测试性；当用户要求审查 Vue 文件、组件质量或组件设计时使用。33
- 24vue-options-api-best-practices zuiaizengdada · Knowledge and memoryVue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.32
- 25vue-component inbharatai · Developer toolsCreate Vue 3 components with Composition API — composables, Pinia store integration, TypeScript, and unit tests.32
- 26vue-interface-standards cycosoft · Developer toolsComponent patterns, state management, and testing standards for the Vue 3 frontend interface in Eyas.30
- 27vue-tsc-skilld andy820621 · Developer toolsALWAYS use when writing code importing \"vue-tsc\". Consult for debugging, best practices, or modifying vue-tsc, vue tsc, language-tools, language tools.29
- 28nuxt-kit-skilld andy820621 · Developer toolsToolkit for authoring modules and interacting with Nuxt. ALWAYS use when writing code importing \"@nuxt/kit\". Consult for debugging, best practices, or modifying @nuxt/kit, nuxt/kit, nuxt kit, nuxt.29
- 29nuxt-skilld andy820621 · Developer toolsNuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js. ALWAYS use when writing code importing \"nuxt\". Consult for debugging, best practices, or modifying nuxt.29
- 30nuxt-patterns alec-c4Nuxt patterns — server routes, composables, SSR boundaries. Load after stacks/nuxt profile.29
- 31vue-nuxt-pro aakash1552005 · DesignModern Vue 3 and Nuxt 3: Composition API (<script setup>), Pinia state management, Nuxt SSR/SSG, Nitro server engine, and Tailwind CSS integration.29
- 32shadcn-vue-theming zone1987 · Designshadcn-vue theming: CSS variable tokens, light and dark mode, Tailwind v4 @theme, typography. Use when the request names shadcn-vue theming, dark mode or its CSS variables.27
- 33nuxt-fullstack arvnflyNuxt 3 full-stack architecture, auto-imports, Nitro engine, server middleware, and universal state.26
- 34vue-composition-api arvnflyVue 3 Composition API, <script setup>, reactivity primitives (ref/reactive), and Pinia state stores.26
- 35nuxt-delay-hydration-skilld wolfstar-project · Developer toolsImprove your Nuxt.js Google Lighthouse score by delaying hydration . ALWAYS use when writing code importing "nuxt-delay-hydration". Consult for debugging, best practices, or modifying nuxt-delay-hydration, nuxt delay hydration.26
- 36nuxt-seo-utils-skilld wolfstar-project · Developer toolsSEO utilities to improve your Nuxt sites discoverability and shareability. ALWAYS use when writing code importing "nuxt-seo-utils". Consult for debugging, best practices, or modifying nuxt-seo-utils, nuxt seo utils.26
- 37nuxt-architect prpatelExpert Nuxt Architect. Scaffolds modern Nuxt 4.5.2 applications and establishes folder structures with Nuxt UI 4.11.1 and Vitest.26
- 38hafez-nuxt-vue EngMahmoudHafezBuild or adopt Nuxt and Vue applications in Hafez vertical slices with generated API contracts, mock-to-real adapters, explicit session states, RTL/i18n support, and frontend quality gates.26
- 39vue-router-best-practices slandathVue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.26
- 40vue-router-best-practices SplitzHQVue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.25
- 41vue-test PDX-Apps · Browser automationGenerate Vitest unit/component tests (@vue/test-utils, data-testid selectors, emitted-event assertions). Use when the user wants to test a component, composable, store, or add unit tests. (End-to-end → playwright addon.)24
- 42vue-a11y NeroWasTrolledImplement or audit accessibility in Vue interfaces, including semantics, keyboard behavior, focus, forms, live updates, contrast, motion, and component-library integration.24
- 43vue-forms NeroWasTrolledBuild or review accessible Vue forms with validation, nested data, uploads, async submission, error recovery, and deliberate dirty and pending states.24
- 44ilma-vue-patterns lokah1945Patterns and best practices for vue patterns24
- 45nuxt-expert ndestates · DesignNuxt 3/4 expert: file-based routing, server routes, composables, Pinia, Nitro, SSR/SSG/prerender, Tailwind module. Cache-first. Use on /nuxt-expert or /chain web-design when manifest framework is nuxt or nuxtjs.24
- 46vue-expert-js ken-jo · Developer toolsCreates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only no TypeScript. Generates JSDoc-typed code with @typedef, @param, and @returns annotations for full type...24
- 47vue-3-nuxt-3-development-cursorrules-prompt-file-cursorrules MikeCheng1208 · Developer toolsApply for vue-3-nuxt-3-development-cursorrules-prompt-file. --- description: Applies to Vue 3 and Nuxt 3 projects, enforcing best practices for frontend development including TypeScript, TailwindCSS, and Composition API. globs: **/*.{vue,ts,js,jsx,tsx}24
- 48vue-page-routes takestairsAdd, rename, or remove page views in the HBuilder pages Vue app by updating src/router/index.js and src/layout/AppAside.vue.24
- 49vue-options-api-best-practices NeelakshSaxena · Knowledge and memoryVue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.24
- 50Frontend Vue Expert SmartIdea2026Especialista em desenvolvimento Frontend com Vue.js (v3), Pinia, Vite e UI/UX.24
- 51vue-jsx-best-practices NeelakshSaxenaJSX syntax in Vue (e.g., class vs className, JSX plugin config).23
- 52vue-nuxt TianQue6916Vue/Nuxt — Composition API/Pinia/Nuxt3 Server Routes/混合渲染/UnoCSS23
- 53nuxt-image-skilld AdrianArenal · Developer toolsNuxt Image Module. ALWAYS use when writing code importing "@nuxt/image". Consult for debugging, best practices, or modifying @nuxt/image, nuxt/image, nuxt image, image.23
- 54nuxt-office-crm Meeovi · Developer toolsStable entrypoint for generated Nuxt guidance in this repository. Use for Nuxt SSR, hydration, pages, `runtimeConfig`, Nitro/h3, plugins, Nuxt UI, Nuxt Content, or Nuxt module work. If generated content is missing, regenerate it with `nuxt prepare`.23
- 55nuxt-office-base Meeovi · Developer toolsStable entrypoint for generated Nuxt guidance in this repository. Use for Nuxt SSR, hydration, pages, `runtimeConfig`, Nitro/h3, plugins, Nuxt UI, Nuxt Content, or Nuxt module work. If generated content is missing, regenerate it with `nuxt prepare`.23
- 56nuxt-layer-shared Meeovi · Developer toolsStable entrypoint for generated Nuxt guidance in this repository. Use for Nuxt SSR, hydration, pages, `runtimeConfig`, Nitro/h3, plugins, Nuxt UI, Nuxt Content, or Nuxt module work. If generated content is missing, regenerate it with `nuxt prepare`.23
- 57nuxt-pixanomy-frontend Meeovi · Developer toolsStable entrypoint for generated Nuxt guidance in this repository. Use for Nuxt SSR, hydration, pages, `runtimeConfig`, Nitro/h3, plugins, Nuxt UI, Nuxt Content, or Nuxt module work. If generated content is missing, regenerate it with `nuxt prepare`.23
- 58nuxt-cute-frontend Meeovi · Developer toolsStable entrypoint for generated Nuxt guidance in this repository. Use for Nuxt SSR, hydration, pages, `runtimeConfig`, Nitro/h3, plugins, Nuxt UI, Nuxt Content, or Nuxt module work. If generated content is missing, regenerate it with `nuxt prepare`.23
- 59nuxt-tasks-frontend Meeovi · Developer toolsStable entrypoint for generated Nuxt guidance in this repository. Use for Nuxt SSR, hydration, pages, `runtimeConfig`, Nitro/h3, plugins, Nuxt UI, Nuxt Content, or Nuxt module work. If generated content is missing, regenerate it with `nuxt prepare`.23
- 60vue-composables allanbantilanBuild reusable Vue 3 composition functions for shared logic and state management.23
- 61vue-code-review christiananjos · Knowledge and memoryUse ao revisar mudanças em componentes Vue 3 (Options API, CDN, sem build) deste projeto — erros engolidos, duplicação, mutação de estado, memory leaks.23
- 62ask-vue-architect felixgardasimatupang-ui · Developer toolsExpert scaffolding for Vue 3. Specialized for Laravel Inertia stacks, but supports Nuxt/Vite. Enforces Composition API & TypeScript.22
- 63vue-application-engineering josalero · Developer toolsBuild and review Vue 3 applications with script setup SFCs, composables, Vue Router, forms, and maintainable feature boundaries. Use when implementing features, refactoring Vue structure, or aligning with modern Vue patterns in existing apps.22
- 64vue-frontend PhongnntsUse when editing FastGuy Vue components, Pinia stores, Vue Router, or frontend API clients.21
- 65bestel-vue-ui-workflow kevinbarfleur · Developer toolsWorkflow for Vue 3, TypeScript, Pinia, Tauri IPC, markdown rendering, chat streaming, and Build Sheet UI changes in Bestel. Use for frontend implementation, debugging, or review.21
- 66vue-tracking-setup-state allenstu6311Vue Reactivity Graph 插件的 setupState 追蹤知識。說明如何識別 component setupState 裡的 ref / reactive / computed，以及 valNodeMap（WeakMap<rawObject, GraphNode>）的建立與查找方式。涉及 collectSetupState、bindSetupTrack、onTrack event 處理、valNodeMap 查找邏輯時載入。21
- 67nuxt-app-architecture-review WangYao-GoGoGoUse when reviewing Nuxt application architecture, auto-imports, modules, SSR/SSG, middleware, composables, server routes, and application structure.21
- 68vue-tracking-inject allenstu6311Vue Reactivity Graph 插件的 provide / inject 追蹤知識。說明 shared reference 造成的污染問題，以及解法：injectRawToNodeMap（module-level WeakMap）、injectRawToLocalNode（per-component Map）、anonymous node 建立機制，與 resolveDepNode 查找順序。涉及 inject 追蹤、provideRawToNode、resolveDepNode 時載入。21
- 69Vue 3 定时刷新响应式数据 lzy18001500226在 Vue 3 的 <script setup> 语法中，使用 setInterval 定期执行函数并更新 ref 响应式变量，确保数据在模板中自动更新。21
- 70Vue.js Mastery cgyudistiraVue 3 Composition API, Pinia state management, and Vue ecosystem best practices.20
- 71Vue.js Composition API Helper Eli-yu-first · Developer toolsGenerates Vue 3 components using Composition API with TypeScript, Pinia stores, and Vue Router integration20
- 72vue Saik0h · Documents and filesCoding standards and conventions for this Vue 3 / Nuxt 4 project. Use this skill whenever writing or reviewing Vue components, Nuxt pages, composables, layouts, plugins, query hooks, mutations, or shadcn UI primitives. Trigger on any task involving component structure, script setup ordering, reactivity, file placement, routing, data fetching with Vue Query, or shadcn theming and extension. Always consult this skill before generating any Vue, Nuxt, or UI code.20
- 73vue-rules 12SA3当用户在对一个vue项目进行开发式，或者让你生成vue代码时，调用此skill19
Questions
Is there an official Vue MCP server?
Check the publisher on each listing: servers published by Vue itself are the official ones. The most used Vue server here is Server Basic Vue by modelcontextprotocol.
How do I connect Vue to Claude?
Pick a server below, open its page and copy the install command for Claude Code, or the config block for Claude Desktop. Most Vue servers need an API key or token from your Vue account.