[{"_1":2,"_301":-5,"_302":-5},"loaderData",{"_3":4,"_29":30,"_244":245},"root",{"_5":6,"_14":15},"toasts",[7],{"_8":9,"_10":11,"_12":13},"uid","019924d9-2919-773d-a7d4-1f6104b93a64","title","This MCP server does not support inspection","type","error","visitor",{"_16":17,"_18":19},"viewportWidth",1280,"visitorSession",{"_20":21,"_23":24,"_25":-5,"_26":27,"_28":-5},"attributes",[22],"bot","id",13985175,"membership","referenceId","01991ab6-f14f-730d-8636-772cf20fbc8c","userAccount","routes/_public/mcp/servers/~namespace/~slug/_pages/_layout",{"_31":32,"_73":-5,"_74":33,"_34":75,"_162":163,"_243":144},"availableLocales",[33,45,52,59,66],{"_34":35,"_38":42,"_43":44},"mcpServer",{"_36":37,"_38":39,"_40":41},"description","Provides application insights for Vue apps by exposing component trees, state, routes, and Pinia data through a Model Context Protocol server.","name","Vue MCP Server","readme","# vite-plugin-vue-mcp\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![bundle][bundle-src]][bundle-href]\n[![License][license-src]][license-href]\n\nVite plugin that enables a MCP server for your Vue app to provide information about the component tree, state, routes, and pinia tree and state.\n\n## Installation 📦\n\n```bash\npnpm install vite-plugin-vue-mcp -D\n```\n\n## Usage 🔨\n\n```ts\n// vite.config.ts\nimport { VueMcp } from 'vite-plugin-vue-mcp'\n\nexport default defineConfig({\n plugins: [VueMcp()],\n})\n```\n\nThen the MCP server will be available at `http://localhost:[port]/__mcp/sse`.\n\nIf you are using Cursor, create a `.cursor/mcp.json` file in your project root, this plugin will automatically update it for you. For more details about the MCP, check the [official Cursor documentation](https://docs.cursor.com/context/model-context-protocol).\n\n### Options\n\n```ts\nexport interface VueMcpOptions {\n /**\n * The host to listen on, default is `localhost`\n */\n host?: string\n\n /**\n * Print the MCP server URL in the console\n *\n * @default true\n */\n printUrl?: boolean\n\n /**\n * The MCP server info. Ingored when `mcpServer` is provided\n */\n mcpServerInfo?: McpServerInfo\n\n /**\n * Custom MCP server, when this is provided, the built-in MCP tools will be ignored\n */\n mcpServer?: (viteServer: ViteDevServer) => Awaitable\n\n /**\n * Setup the MCP server, this is called when the MCP server is created\n * You may also return a new MCP server to replace the default one\n */\n mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable\n\n /**\n * The path to the MCP server, default is `/__mcp`\n */\n mcpPath?: string\n\n /**\n * Update the address of the MCP server in the cursor config file `.cursor/mcp.json`,\n * if `.cursor` folder exists.\n *\n * @default true\n */\n updateCursorMcpJson?: boolean | {\n enabled: boolean\n /**\n * The name of the MCP server, default is `vue-mcp`\n */\n serverName?: string\n }\n\n /**\n * append an import to the module id ending with `appendTo` instead of adding a script into body\n * useful for projects that do not use html file as an entry\n *\n * WARNING: only set this if you know exactly what it does.\n * @default ''\n */\n appendTo?: string | RegExp\n}\n```\n\n## Features/Tools ✨\n\n### Get Component Tree\n\n`get-component-tree`: Get the Vue component tree.\n\n![component-tree](./screenshots/component-tree.gif)\n\n### Get Component State\n\n`get-component-state`: Get the state of a component (input: `componentName`).\n\n![component-state](./screenshots/component-state.gif)\n\n### Edit Component State\n\n`edit-component-state`: Edit the state of a component (input: `componentName`, `path`, `value`, `valueType`).\n\n![edit-component-state](./screenshots/edit-component-state.gif)\n\n### Highlight Component\n\n`highlight-component`: Highlight a component (input: `componentName`).\n\n![highlight-component](./screenshots/highlight-component.gif)\n\n### Get Routes\n\n`get-router-info`: Get the Vue router info of the application.\n\n![route-tree](./screenshots/router-info.gif)\n\n### Get Pinia Tree\n\n`get-pinia-tree`: Get the Pinia tree of the application.\n\n![pinia-tree](./screenshots/pinia-tree.gif)\n\n### Get Pinia State\n\n`get-pinia-state`: Get the Pinia state of the application (input: `storeName`).\n\n![pinia-state](./screenshots/pinia-state.gif)\n\n## Architecture ⚡️\n\n![architecture](./screenshots/architecture.png)\n\n## Notice 💡\n\n**Please ensure the application is running in your browser before using the features.**\n\n## Credits 💖\n\nThis project is inspired by [vite-plugin-mcp](https://github.com/antfu/nuxt-mcp/tree/main/packages/vite-plugin-mcp). Thanks to [@antfu](https://github.com/antfu) for the great work.\n\n## License 📖\n\n[MIT](./LICENSE) License © [Arlo](https://github.com/webfansplz)\n\n\n\n[npm-version-src]: https://img.shields.io/npm/v/vite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669\n[npm-version-href]: https://npmjs.com/package/vite-plugin-vue-mcp\n[npm-downloads-src]: https://img.shields.io/npm/dm/vite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669\n[npm-downloads-href]: https://npmjs.com/package/vite-plugin-vue-mcp\n[bundle-src]: https://img.shields.io/bundlephobia/minzip/vite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669&label=minzip\n[bundle-href]: https://bundlephobia.com/result?p=vite-plugin-vue-mcp\n[license-src]: https://img.shields.io/github/license/webfansplz/vite-plugin-vue-mcp.svg?style=flat&colorA=080f12&colorB=1fa669\n[license-href]: https://github.com/webfansplz/vite-plugin-vue-mcp/blob/main/LICENSE\n","English","tag","en-US",{"_34":46,"_38":50,"_43":51},{"_36":47,"_38":48,"_40":49},"Proporciona información sobre las aplicaciones de Vue al exponer árboles de componentes, estado, rutas y datos de Pinia a través de un servidor de protocolo de contexto de modelo.","Servidor Vue MCP","# complemento vite-vue-mcp\n\n[![versión npm](https://img.shields.io/npm/v/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://npmjs.com/package/vite-plugin-vue-mcp) [![Descargas de npm](https://img.shields.io/npm/dm/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://npmjs.com/package/vite-plugin-vue-mcp) [![manojo](https://img.shields.io/bundlephobia/minzip/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669\\&label=minzip)](https://bundlephobia.com/result?p=vite-plugin-vue-mcp) [![Licencia](https://img.shields.io/github/license/webfansplz/vite-plugin-vue-mcp.svg?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://github.com/webfansplz/vite-plugin-vue-mcp/blob/main/LICENSE)\n\nComplemento de Vite que habilita un servidor MCP para su aplicación Vue para proporcionar información sobre el árbol de componentes, el estado, las rutas y el árbol pinia y el estado.\n\n## Instalación 📦\n\n```bash\npnpm install vite-plugin-vue-mcp -D\n```\n\n## Uso 🔨\n\n```ts\n// vite.config.ts\nimport { VueMcp } from 'vite-plugin-vue-mcp'\n\nexport default defineConfig({\n plugins: [VueMcp()],\n})\n```\n\nEntonces el servidor MCP estará disponible en `http://localhost:[port]/__mcp/sse` .\n\nSi usa Cursor, cree un archivo `.cursor/mcp.json` en la raíz de su proyecto; este complemento lo actualizará automáticamente. Para más información sobre MCP, consulte la [documentación oficial de Cursor](https://docs.cursor.com/context/model-context-protocol) .\n\n### Opciones\n\n```ts\nexport interface VueMcpOptions {\n /**\n * The host to listen on, default is `localhost`\n */\n host?: string\n\n /**\n * Print the MCP server URL in the console\n *\n * @default true\n */\n printUrl?: boolean\n\n /**\n * The MCP server info. Ingored when `mcpServer` is provided\n */\n mcpServerInfo?: McpServerInfo\n\n /**\n * Custom MCP server, when this is provided, the built-in MCP tools will be ignored\n */\n mcpServer?: (viteServer: ViteDevServer) => Awaitable\n\n /**\n * Setup the MCP server, this is called when the MCP server is created\n * You may also return a new MCP server to replace the default one\n */\n mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable\n\n /**\n * The path to the MCP server, default is `/__mcp`\n */\n mcpPath?: string\n\n /**\n * Update the address of the MCP server in the cursor config file `.cursor/mcp.json`,\n * if `.cursor` folder exists.\n *\n * @default true\n */\n updateCursorMcpJson?: boolean | {\n enabled: boolean\n /**\n * The name of the MCP server, default is `vue-mcp`\n */\n serverName?: string\n }\n\n /**\n * append an import to the module id ending with `appendTo` instead of adding a script into body\n * useful for projects that do not use html file as an entry\n *\n * WARNING: only set this if you know exactly what it does.\n * @default ''\n */\n appendTo?: string | RegExp\n}\n```\n\n## Características/Herramientas ✨\n\n### Obtener árbol de componentes\n\n`get-component-tree` : obtiene el árbol de componentes de Vue.\n\n![árbol de componentes](./screenshots/component-tree.gif)\n\n### Obtener el estado del componente\n\n`get-component-state` : obtiene el estado de un componente (entrada: `componentName` ).\n\n![estado del componente](./screenshots/component-state.gif)\n\n### Editar el estado del componente\n\n`edit-component-state` : edita el estado de un componente (entrada: `componentName` , `path` , `value` , `valueType` ).\n\n![editar-estado-del-componente](./screenshots/edit-component-state.gif)\n\n### Resaltar componente\n\n`highlight-component` : Resalta un componente (entrada: `componentName` ).\n\n![componente destacado](./screenshots/highlight-component.gif)\n\n### Obtener rutas\n\n`get-router-info` : obtiene la información del enrutador Vue de la aplicación.\n\n![árbol de rutas](./screenshots/router-info.gif)\n\n### Consigue el árbol Pinia\n\n`get-pinia-tree` : obtiene el árbol Pinia de la aplicación.\n\n![árbol de pinia](./screenshots/pinia-tree.gif)\n\n### Obtenga Pinia State\n\n`get-pinia-state` : obtiene el estado de Pinia de la aplicación (entrada: `storeName` ).\n\n![estado de pinia](./screenshots/pinia-state.gif)\n\n## Arquitectura ⚡️\n\n![arquitectura](./screenshots/architecture.png)\n\n## Aviso 💡\n\n**Asegúrese de que la aplicación se esté ejecutando en su navegador antes de utilizar las funciones.**\n\n## Créditos 💖\n\nEste proyecto está inspirado en [vite-plugin-mcp](https://github.com/antfu/nuxt-mcp/tree/main/packages/vite-plugin-mcp) . Gracias a [@antfu](https://github.com/antfu) por el excelente trabajo.\n\n## Licencia 📖\n\nLicencia [MIT](./LICENSE) © [Arlo](https://github.com/webfansplz)","Spanish","es-ES",{"_34":53,"_38":57,"_43":58},{"_36":54,"_38":55,"_40":56},"モデルコンテキストプロトコルサーバーを通じてコンポーネントツリー、状態、ルート、および Pinia データを公開することにより、Vue アプリのアプリケーションインサイトを提供します。","Vue MCP サーバー","# vite-プラグイン-vue-mcp\n\n[![npmバージョン](https://img.shields.io/npm/v/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://npmjs.com/package/vite-plugin-vue-mcp) [![npmダウンロード](https://img.shields.io/npm/dm/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://npmjs.com/package/vite-plugin-vue-mcp) [![バンドル](https://img.shields.io/bundlephobia/minzip/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669\\&label=minzip)](https://bundlephobia.com/result?p=vite-plugin-vue-mcp) [![ライセンス](https://img.shields.io/github/license/webfansplz/vite-plugin-vue-mcp.svg?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://github.com/webfansplz/vite-plugin-vue-mcp/blob/main/LICENSE)\n\nVue アプリの MCP サーバーがコンポーネントツリー、状態、ルート、ピニアツリーと状態に関する情報を提供できるようにする Vite プラグイン。\n\n## インストール📦\n\n```bash\npnpm install vite-plugin-vue-mcp -D\n```\n\n## 使用方法🔨\n\n```ts\n// vite.config.ts\nimport { VueMcp } from 'vite-plugin-vue-mcp'\n\nexport default defineConfig({\n plugins: [VueMcp()],\n})\n```\n\nその後、MCP サーバーは`http://localhost:[port]/__mcp/sse`で利用できるようになります。\n\nCursor をご利用の場合は、プロジェクトルートに`.cursor/mcp.json`ファイルを作成してください。このプラグインによって自動的に更新されます。MCP の詳細については、 [Cursor の公式ドキュメント](https://docs.cursor.com/context/model-context-protocol)をご覧ください。\n\n### オプション\n\n```ts\nexport interface VueMcpOptions {\n /**\n * The host to listen on, default is `localhost`\n */\n host?: string\n\n /**\n * Print the MCP server URL in the console\n *\n * @default true\n */\n printUrl?: boolean\n\n /**\n * The MCP server info. Ingored when `mcpServer` is provided\n */\n mcpServerInfo?: McpServerInfo\n\n /**\n * Custom MCP server, when this is provided, the built-in MCP tools will be ignored\n */\n mcpServer?: (viteServer: ViteDevServer) => Awaitable\n\n /**\n * Setup the MCP server, this is called when the MCP server is created\n * You may also return a new MCP server to replace the default one\n */\n mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable\n\n /**\n * The path to the MCP server, default is `/__mcp`\n */\n mcpPath?: string\n\n /**\n * Update the address of the MCP server in the cursor config file `.cursor/mcp.json`,\n * if `.cursor` folder exists.\n *\n * @default true\n */\n updateCursorMcpJson?: boolean | {\n enabled: boolean\n /**\n * The name of the MCP server, default is `vue-mcp`\n */\n serverName?: string\n }\n\n /**\n * append an import to the module id ending with `appendTo` instead of adding a script into body\n * useful for projects that do not use html file as an entry\n *\n * WARNING: only set this if you know exactly what it does.\n * @default ''\n */\n appendTo?: string | RegExp\n}\n```\n\n## 機能/ツール ✨\n\n### コンポーネントツリーを取得\n\n`get-component-tree` : Vue コンポーネントツリーを取得します。\n\n![コンポーネントツリー](./screenshots/component-tree.gif)\n\n### コンポーネントの状態を取得する\n\n`get-component-state` : コンポーネントの状態を取得します (入力: `componentName` )。\n\n![コンポーネント状態](./screenshots/component-state.gif)\n\n### コンポーネントの状態を編集する\n\n`edit-component-state` : コンポーネントの状態を編集します (入力: `componentName` 、 `path` 、 `value` 、 `valueType` )。\n\n![コンポーネント状態の編集](./screenshots/edit-component-state.gif)\n\n### ハイライトコンポーネント\n\n`highlight-component` : コンポーネントをハイライトします (入力: `componentName` )。\n\n![ハイライトコンポーネント](./screenshots/highlight-component.gif)\n\n### ルートを取得\n\n`get-router-info` : アプリケーションの Vue ルーター情報を取得します。\n\n![ルートツリー](./screenshots/router-info.gif)\n\n### ピニアツリーを入手する\n\n`get-pinia-tree` : アプリケーションの Pinia ツリーを取得します。\n\n![マツ科](./screenshots/pinia-tree.gif)\n\n### ピニア州を取得する\n\n`get-pinia-state` : アプリケーションの Pinia 状態を取得します (入力: `storeName` )。\n\n![ピニア州](./screenshots/pinia-state.gif)\n\n## 建築⚡️\n\n![建築](./screenshots/architecture.png)\n\n## お知らせ💡\n\n**機能を使用する前に、ブラウザでアプリケーションが実行されていることを確認してください。**\n\n## クレジット💖\n\nこのプロジェクトは[vite-plugin-mcp](https://github.com/antfu/nuxt-mcp/tree/main/packages/vite-plugin-mcp)にインスピレーションを受けています。素晴らしい仕事をしてくださった[@antfu](https://github.com/antfu)に感謝します。\n\n## ライセンス📖\n\n[MIT](./LICENSE)ライセンス © [Arlo](https://github.com/webfansplz)","Japanese","ja-JP",{"_34":60,"_38":64,"_43":65},{"_36":61,"_38":62,"_40":63},"모델 컨텍스트 프로토콜 서버를 통해 구성 요소 트리, 상태, 경로 및 Pinia 데이터를 노출하여 Vue 앱에 대한 애플리케이션 통찰력을 제공합니다.","Vue MCP 서버","# vite-플러그인-vue-mcp\n\n[![npm 버전](https://img.shields.io/npm/v/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://npmjs.com/package/vite-plugin-vue-mcp) [![npm 다운로드](https://img.shields.io/npm/dm/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://npmjs.com/package/vite-plugin-vue-mcp) [![묶음](https://img.shields.io/bundlephobia/minzip/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669\\&label=minzip)](https://bundlephobia.com/result?p=vite-plugin-vue-mcp) [![특허](https://img.shields.io/github/license/webfansplz/vite-plugin-vue-mcp.svg?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://github.com/webfansplz/vite-plugin-vue-mcp/blob/main/LICENSE)\n\nVue 앱의 MCP 서버가 구성 요소 트리, 상태, 경로, 피니아 트리 및 상태에 대한 정보를 제공할 수 있도록 하는 Vite 플러그인입니다.\n\n## 설치 📦\n\n지엑스피1\n\n## 사용법 🔨\n\n```ts\n// vite.config.ts\nimport { VueMcp } from 'vite-plugin-vue-mcp'\n\nexport default defineConfig({\n plugins: [VueMcp()],\n})\n```\n\n그러면 MCP 서버는 `http://localhost:[port]/__mcp/sse` 에서 사용할 수 있습니다.\n\nCursor를 사용하는 경우 프로젝트 루트에 `.cursor/mcp.json` 파일을 생성하세요. 이 플러그인이 자동으로 업데이트해 줍니다. MCP에 대한 자세한 내용은 [Cursor 공식 문서를](https://docs.cursor.com/context/model-context-protocol) 참조하세요.\n\n### 옵션\n\n```ts\nexport interface VueMcpOptions {\n /**\n * The host to listen on, default is `localhost`\n */\n host?: string\n\n /**\n * Print the MCP server URL in the console\n *\n * @default true\n */\n printUrl?: boolean\n\n /**\n * The MCP server info. Ingored when `mcpServer` is provided\n */\n mcpServerInfo?: McpServerInfo\n\n /**\n * Custom MCP server, when this is provided, the built-in MCP tools will be ignored\n */\n mcpServer?: (viteServer: ViteDevServer) => Awaitable\n\n /**\n * Setup the MCP server, this is called when the MCP server is created\n * You may also return a new MCP server to replace the default one\n */\n mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable\n\n /**\n * The path to the MCP server, default is `/__mcp`\n */\n mcpPath?: string\n\n /**\n * Update the address of the MCP server in the cursor config file `.cursor/mcp.json`,\n * if `.cursor` folder exists.\n *\n * @default true\n */\n updateCursorMcpJson?: boolean | {\n enabled: boolean\n /**\n * The name of the MCP server, default is `vue-mcp`\n */\n serverName?: string\n }\n\n /**\n * append an import to the module id ending with `appendTo` instead of adding a script into body\n * useful for projects that do not use html file as an entry\n *\n * WARNING: only set this if you know exactly what it does.\n * @default ''\n */\n appendTo?: string | RegExp\n}\n```\n\n## 기능/도구 ✨\n\n### 구성 요소 트리 가져오기\n\n`get-component-tree` : Vue 컴포넌트 트리를 가져옵니다.\n\n![컴포넌트 트리](./screenshots/component-tree.gif)\n\n### 구성 요소 상태 가져오기\n\n`get-component-state` : 구성 요소의 상태를 가져옵니다(입력: `componentName` ).\n\n![구성 요소 상태](./screenshots/component-state.gif)\n\n### 구성 요소 상태 편집\n\n`edit-component-state` : 구성 요소의 상태를 편집합니다(입력: `componentName` , `path` , `value` , `valueType` ).\n\n![구성 요소 상태 편집](./screenshots/edit-component-state.gif)\n\n### 구성 요소 강조\n\n`highlight-component` : 구성 요소를 강조 표시합니다(입력: `componentName` ).\n\n![하이라이트 구성 요소](./screenshots/highlight-component.gif)\n\n### 경로 가져오기\n\n`get-router-info` : 애플리케이션의 Vue 라우터 정보를 가져옵니다.\n\n![경로 트리](./screenshots/router-info.gif)\n\n### 피니아 나무를 얻으세요\n\n`get-pinia-tree` : 애플리케이션의 Pinia 트리를 가져옵니다.\n\n![피니아나무](./screenshots/pinia-tree.gif)\n\n### 피니아 주를 얻으세요\n\n`get-pinia-state` : 애플리케이션의 Pinia 상태를 가져옵니다(입력: `storeName` ).\n\n![피니아 주](./screenshots/pinia-state.gif)\n\n## 건축 ⚡️\n\n![건축학](./screenshots/architecture.png)\n\n## 공지사항 💡\n\n**해당 기능을 사용하기 전에 브라우저에서 해당 애플리케이션이 실행 중인지 확인하세요.**\n\n## 크레딧 💖\n\n이 프로젝트는 [vite-plugin-mcp](https://github.com/antfu/nuxt-mcp/tree/main/packages/vite-plugin-mcp) 에서 영감을 받았습니다. 훌륭한 작업을 해주신 [@antfu](https://github.com/antfu) 님께 감사드립니다.\n\n## 라이센스 📖\n\n[MIT](./LICENSE) 라이선스 © [Arlo](https://github.com/webfansplz)","Korean","ko-KR",{"_34":67,"_38":71,"_43":72},{"_36":68,"_38":69,"_40":70},"通过模型上下文协议服务器公开组件树、状态、路由和 Pinia 数据，为 Vue 应用程序提供应用程序洞察。","Vue MCP 服务器","# vite-插件-vue-mcp\n\n[![npm 版本](https://img.shields.io/npm/v/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://npmjs.com/package/vite-plugin-vue-mcp) [![npm 下载](https://img.shields.io/npm/dm/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://npmjs.com/package/vite-plugin-vue-mcp) [![捆](https://img.shields.io/bundlephobia/minzip/vite-plugin-vue-mcp?style=flat\\&colorA=080f12\\&colorB=1fa669\\&label=minzip)](https://bundlephobia.com/result?p=vite-plugin-vue-mcp) [![执照](https://img.shields.io/github/license/webfansplz/vite-plugin-vue-mcp.svg?style=flat\\&colorA=080f12\\&colorB=1fa669)](https://github.com/webfansplz/vite-plugin-vue-mcp/blob/main/LICENSE)\n\nVite 插件为您的 Vue 应用程序启用 MCP 服务器，以提供有关组件树、状态、路由以及 pinia 树和状态的信息。\n\n## 安装📦\n\n```bash\npnpm install vite-plugin-vue-mcp -D\n```\n\n## 用法🔨\n\n```ts\n// vite.config.ts\nimport { VueMcp } from 'vite-plugin-vue-mcp'\n\nexport default defineConfig({\n plugins: [VueMcp()],\n})\n```\n\n然后 MCP 服务器将可以通过`http://localhost:[port]/__mcp/sse`访问。\n\n如果您正在使用 Cursor，请在项目根目录下创建一个`.cursor/mcp.json`文件，此插件将自动为您更新。有关 MCP 的更多详细信息，请参阅[Cursor 官方文档](https://docs.cursor.com/context/model-context-protocol)。\n\n### 选项\n\n```ts\nexport interface VueMcpOptions {\n /**\n * The host to listen on, default is `localhost`\n */\n host?: string\n\n /**\n * Print the MCP server URL in the console\n *\n * @default true\n */\n printUrl?: boolean\n\n /**\n * The MCP server info. Ingored when `mcpServer` is provided\n */\n mcpServerInfo?: McpServerInfo\n\n /**\n * Custom MCP server, when this is provided, the built-in MCP tools will be ignored\n */\n mcpServer?: (viteServer: ViteDevServer) => Awaitable\n\n /**\n * Setup the MCP server, this is called when the MCP server is created\n * You may also return a new MCP server to replace the default one\n */\n mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable\n\n /**\n * The path to the MCP server, default is `/__mcp`\n */\n mcpPath?: string\n\n /**\n * Update the address of the MCP server in the cursor config file `.cursor/mcp.json`,\n * if `.cursor` folder exists.\n *\n * @default true\n */\n updateCursorMcpJson?: boolean | {\n enabled: boolean\n /**\n * The name of the MCP server, default is `vue-mcp`\n */\n serverName?: string\n }\n\n /**\n * append an import to the module id ending with `appendTo` instead of adding a script into body\n * useful for projects that do not use html file as an entry\n *\n * WARNING: only set this if you know exactly what it does.\n * @default ''\n */\n appendTo?: string | RegExp\n}\n```\n\n## 功能/工具✨\n\n### 获取组件树\n\n`get-component-tree` ：获取 Vue 组件树。\n\n![组件树](./screenshots/component-tree.gif)\n\n### 获取组件状态\n\n`get-component-state` ：获取组件的状态（输入： `componentName` ）。\n\n![组件状态](./screenshots/component-state.gif)\n\n### 编辑组件状态\n\n`edit-component-state` ：编辑组件的状态（输入： `componentName` 、 `path` 、 `value` 、 `valueType` ）。\n\n![编辑组件状态](./screenshots/edit-component-state.gif)\n\n### 突出显示组件\n\n`highlight-component` ：突出显示组件（输入： `componentName` ）。\n\n![突出显示组件](./screenshots/highlight-component.gif)\n\n### 获取路线\n\n`get-router-info` ：获取应用程序的 Vue 路由器信息。\n\n![路由树](./screenshots/router-info.gif)\n\n### 获取 Pinia 树\n\n`get-pinia-tree` ：获取应用程序的 Pinia 树。\n\n![松树](./screenshots/pinia-tree.gif)\n\n### 获取 Pinia 州\n\n`get-pinia-state` ：获取应用程序的 Pinia 状态（输入： `storeName` ）。\n\n![松属](./screenshots/pinia-state.gif)\n\n## 建筑⚡️\n\n![建筑学](./screenshots/architecture.png)\n\n## 通知💡\n\n**在使用这些功能之前，请确保应用程序在您的浏览器中运行。**\n\n## 致谢💖\n\n该项目灵感源自[vite-plugin-mcp](https://github.com/antfu/nuxt-mcp/tree/main/packages/vite-plugin-mcp) 。感谢[@antfu](https://github.com/antfu)的出色工作。\n\n## 许可证📖\n\n[MIT](./LICENSE)许可证 © [Arlo](https://github.com/webfansplz)","Chinese","zh-CN","githubUser","locale",{"_76":77,"_20":78,"_84":37,"_85":37,"_23":86,"_87":88,"_38":39,"_99":100,"_107":108,"_109":110,"_150":151,"_156":-5,"_95":132,"_157":158,"_8":159,"_160":161},"addedAt","2025-03-16T12:01:39.434434145Z",[79,80,81,82,83],"category:developer-tools","category:monitoring","environment:local","language:vue","license_grade:a","descriptionMarkdown","descriptionPlainText",1874,"integrations",[89],{"_90":91,"_36":97,"_8":98},"brand",{"_92":93,"_38":94,"_95":96},"logoSvgPath","m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808 0 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z","Vite","slug","vite","Provides integration with Vite development servers to expose component and state data through MCP endpoints.","y1mhhqpzjb","namespace",{"_101":102,"_95":106},"owner",{"_103":104},"githubAccount",{"_105":106},"login","webfansplz","redditPostExternalId","1jck530","repository",{"_111":112,"_118":119,"_122":123,"_142":-5,"_143":144,"_145":146,"_149":-5},"argumentsJsonSchema",{"_113":114,"_115":116,"_12":117},"properties",{},"required",[],"object","githubProject",{"_40":41,"_120":121},"url","https://github.com/webfansplz/vite-plugin-vue-mcp","githubRepository",{"_124":125,"_126":127,"_128":129,"_130":131,"_38":132,"_101":133,"_135":136,"_137":138,"_140":141},"defaultBranch","main","fullName","webfansplz/vite-plugin-vue-mcp","githubTreeId",110144,"language","Vue","vite-plugin-vue-mcp",{"_105":106,"_8":134},"8i53ayTZwS","recentStargazers",1,"spdxLicense",{"_38":139},"MIT License","stargazers",500,"glamaJson","inspectable",false,"npmPackage",{"_38":132,"_147":148},"weeklyDownloads",1134,"supportedPlatforms","scores",{"_152":153,"_154":-5,"_155":-5},"license",100,"quality","security","simpleIcon","toolCount",0,"wxe5s8ifko","updatedAt","2025-09-03T13:41:45.147147140Z","meta",[164,166,168,175,178,180,183,186,189,192,195,197,200,203,205,207,209,211,213],{"_10":165},"Vue MCP Server | Glama",{"_167":37,"_38":36},"content",{"_169":170,"_171":172,"_173":174},"href","https://glama.ai/mcp/servers/@webfansplz/vite-plugin-vue-mcp","rel","canonical","tagName","link",{"_167":39,"_176":177},"property","og:title",{"_167":37,"_176":179},"og:description",{"_167":181,"_176":182},"https://glama.ai/logo.png","og:logo",{"_167":184,"_176":185},"https://glama.ai/mcp/servers/@webfansplz/vite-plugin-vue-mcp/og-image","og:image",{"_167":187,"_176":188},"630","og:image:height",{"_167":190,"_176":191},"1200","og:image:width",{"_167":193,"_176":194},"website","og:type",{"_167":170,"_176":196},"og:url",{"_167":198,"_176":199},"Glama – MCP Hosting Platform","og:site_name",{"_167":201,"_38":202},"summary_large_image","twitter:card",{"_167":198,"_38":204},"twitter:title",{"_167":37,"_38":206},"twitter:description",{"_167":184,"_38":208},"twitter:image",{"_167":187,"_38":210},"twitter:image:height",{"_167":190,"_38":212},"twitter:image:width",{"_214":215},"script:ld+json",{"_216":217,"_218":219},"@context","http://schema.org","@graph",[220],{"_216":221,"_222":223,"_224":225},"https://schema.org","@type","BreadcrumbList","itemListElement",[226,232,236,240],{"_222":227,"_228":229,"_38":230,"_231":136},"ListItem","item","/","Glama","position",{"_222":227,"_228":233,"_38":234,"_231":235},"/mcp","MCP",2,{"_222":227,"_228":237,"_38":238,"_231":239},"/mcp/servers","Servers",3,{"_222":227,"_228":241,"_38":39,"_231":242},"/mcp/servers/@webfansplz/vite-plugin-vue-mcp",4,"visitorIsMaintainer","routes/_public/mcp/servers/~namespace/~slug/_pages/reviews/_route",{"_73":-5,"_34":246,"_162":264,"_300":-5},{"_76":77,"_20":247,"_84":37,"_85":37,"_23":86,"_87":248,"_38":39,"_99":251,"_107":108,"_109":254,"_150":263,"_156":-5,"_95":132,"_157":158,"_8":159,"_160":161},[79,80,81,82,83],[249],{"_90":250,"_36":97,"_8":98},{"_92":93,"_38":94,"_95":96},{"_101":252,"_95":106},{"_103":253},{"_105":106},{"_111":255,"_118":258,"_122":259,"_142":-5,"_143":144,"_145":262,"_149":-5},{"_113":256,"_115":257,"_12":117},{},[],{"_40":41,"_120":121},{"_124":125,"_126":127,"_128":129,"_130":131,"_38":132,"_101":260,"_135":136,"_137":261,"_140":141},{"_105":106,"_8":134},{"_38":139},{"_38":132,"_147":148},{"_152":153,"_154":-5,"_155":-5},[265,267,269,271,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287],{"_10":266},"Reviews | Vue MCP Server | Glama",{"_167":268,"_38":36},"Read community reviews and feedback for Vue MCP Server. Discover user experiences, ratings, strengths, and potential limitations of this MCP implementation from actual users.",{"_169":270,"_171":172,"_173":174},"https://glama.ai/mcp/servers/@webfansplz/vite-plugin-vue-mcp/reviews",{"_167":272,"_176":177},"Reviews | Vue MCP Server",{"_167":268,"_176":179},{"_167":181,"_176":182},{"_167":184,"_176":185},{"_167":187,"_176":188},{"_167":190,"_176":191},{"_167":193,"_176":194},{"_167":270,"_176":196},{"_167":198,"_176":199},{"_167":201,"_38":202},{"_167":198,"_38":204},{"_167":268,"_38":206},{"_167":184,"_38":208},{"_167":187,"_38":210},{"_167":190,"_38":212},{"_214":288},{"_216":217,"_218":289},[290],{"_216":221,"_222":223,"_224":291},[292,293,294,295,296],{"_222":227,"_228":229,"_38":230,"_231":136},{"_222":227,"_228":233,"_38":234,"_231":235},{"_222":227,"_228":237,"_38":238,"_231":239},{"_222":227,"_228":241,"_38":39,"_231":242},{"_222":227,"_228":297,"_38":298,"_231":299},"/mcp/servers/@webfansplz/vite-plugin-vue-mcp/reviews","Reviews",5,"review","actionData","errors"]

MCP directory API