Vue MCP Server
vite-플러그인-vue-mcp
Vue 앱의 MCP 서버가 구성 요소 트리, 상태, 경로, 피니아 트리 및 상태에 대한 정보를 제공할 수 있도록 하는 Vite 플러그인입니다.
설치 📦
지엑스피1
Related MCP server: nuxt-mcp / vite-plugin-mcp
사용법 🔨
// vite.config.ts
import { VueMcp } from 'vite-plugin-vue-mcp'
export default defineConfig({
plugins: [VueMcp()],
})그러면 MCP 서버는 http://localhost:[port]/__mcp/sse 에서 사용할 수 있습니다.
Cursor를 사용하는 경우 프로젝트 루트에 .cursor/mcp.json 파일을 생성하세요. 이 플러그인이 자동으로 업데이트해 줍니다. MCP에 대한 자세한 내용은 Cursor 공식 문서를 참조하세요.
옵션
export interface VueMcpOptions {
/**
* The host to listen on, default is `localhost`
*/
host?: string
/**
* Print the MCP server URL in the console
*
* @default true
*/
printUrl?: boolean
/**
* The MCP server info. Ingored when `mcpServer` is provided
*/
mcpServerInfo?: McpServerInfo
/**
* Custom MCP server, when this is provided, the built-in MCP tools will be ignored
*/
mcpServer?: (viteServer: ViteDevServer) => Awaitable<McpServer>
/**
* Setup the MCP server, this is called when the MCP server is created
* You may also return a new MCP server to replace the default one
*/
mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable<void | McpServer>
/**
* The path to the MCP server, default is `/__mcp`
*/
mcpPath?: string
/**
* Update the address of the MCP server in the cursor config file `.cursor/mcp.json`,
* if `.cursor` folder exists.
*
* @default true
*/
updateCursorMcpJson?: boolean | {
enabled: boolean
/**
* The name of the MCP server, default is `vue-mcp`
*/
serverName?: string
}
/**
* append an import to the module id ending with `appendTo` instead of adding a script into body
* useful for projects that do not use html file as an entry
*
* WARNING: only set this if you know exactly what it does.
* @default ''
*/
appendTo?: string | RegExp
}기능/도구 ✨
구성 요소 트리 가져오기
get-component-tree : Vue 컴포넌트 트리를 가져옵니다.

구성 요소 상태 가져오기
get-component-state : 구성 요소의 상태를 가져옵니다(입력: componentName ).

구성 요소 상태 편집
edit-component-state : 구성 요소의 상태를 편집합니다(입력: componentName , path , value , valueType ).

구성 요소 강조
highlight-component : 구성 요소를 강조 표시합니다(입력: componentName ).

경로 가져오기
get-router-info : 애플리케이션의 Vue 라우터 정보를 가져옵니다.

피니아 나무를 얻으세요
get-pinia-tree : 애플리케이션의 Pinia 트리를 가져옵니다.

피니아 주를 얻으세요
get-pinia-state : 애플리케이션의 Pinia 상태를 가져옵니다(입력: storeName ).

건축 ⚡️

공지사항 💡
해당 기능을 사용하기 전에 브라우저에서 해당 애플리케이션이 실행 중인지 확인하세요.
크레딧 💖
이 프로젝트는 vite-plugin-mcp 에서 영감을 받았습니다. 훌륭한 작업을 해주신 @antfu 님께 감사드립니다.
라이센스 📖
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- AlicenseCqualityFmaintenanceEnables AI agents and assistants like Goose or Claude to interact with VS Code through the Model Context Protocol.762275Apache 2.0
- Alicense-qualityDmaintenanceMCP server that helps AI models understand Vite/Nuxt applications better, available as both a Nuxt module and Vite plugin.MIT
- AlicenseBqualityBmaintenanceA Model Context Protocol server that provides comprehensive Electron application automation, debugging, and observability capabilities through Chrome DevTools Protocol integration.445971MIT
- Alicense-qualityCmaintenanceEnables real-time debugging and state manipulation of Vue.js applications through MCP protocol, integrating with Vue DevTools to access component trees, states, router info, and Pinia stores.3444MIT
Related MCP Connectors
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
A Model Context Protocol server for Wix AI tools
MCP (Model Context Protocol) server for Appwrite
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/webfansplz/vite-plugin-vue-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server