Server facts
vite-plugin-vue-mcp
Project
- Author
- webfansplz
- License
- MIT
- Category
- Developer Tools
Tech
- Runtime / language
- vue
- Transports
- stdio
- Remote available
- No
- Authentication
- Not specified
Activity
- GitHub stars
- 578
- Last commit
- Data as of
Tags
- Component Inspection
- Pinia
- State Editing
- Vite
- Vue
Overview
vite-plugin-vue-mcp adds an MCP interface to a Vue application through its Vite configuration. It is aimed at assistants that need information from the running application, not just static project files. Its tools expose the component tree, state for a named component, router information, and the Pinia store tree and store state. A state-editing tool accepts a component name, property path, value, and value type. Another tool highlights a component, linking the inspected component structure with the browser view. The README explicitly requires the application to be running in the browser before these features are used.
Installation is shown as a development dependency added with pnpm. Users then import VueMcp and register it in the Vite plugin list; the MCP endpoint appears under the development server's configured port using an SSE path. Cursor integration can update the project's MCP configuration, with options to control that behavior and the server name. Other options customize the listening host, endpoint path, and URL logging. Advanced integrations can modify server setup or replace the default server entirely, in which case the built-in tools are ignored. A special module-import option supports projects without an HTML entry point and carries a caution in the README. No environment-variable configuration or independent stdio launch command is supplied.
Install & configure
Requirements
- A Vue app using Vite
- pnpm
- The application running in a browser
pnpm install vite-plugin-vue-mcp -DThis command installs the plugin; it is not a standalone MCP launch. Register VueMcp() in vite.config.ts. The README endpoint template is http://localhost:[port]/__mcp/sse; replace the port with the running Vite port.
Examples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Config file · macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Use Settings → Developer → Edit Config when available. Do not assume a Linux configuration path; check the client documentation for your platform. Remote servers use the app’s connector flow when supported, not the local stdio file shown here. Merge this example with existing settings; do not overwrite unrelated servers.
No install command stated in the README — see repo. Check the client documentation for a supported connection method.
Read the Claude Desktop setup guideConfig file · Project: .cursor/mcp.json
User: ~/.cursor/mcp.json
The project path is relative to the workspace root. The tilde denotes your user home directory. Use Cursor’s MCP settings to confirm which configuration and scope your installed version is reading. Merge this example with existing settings; do not overwrite unrelated servers.
No install command stated in the README — see repo. Check the client documentation for a supported connection method.
Read the Cursor setup guideConfig file · Workspace: .vscode/mcp.json
For user scope, use the “MCP: Open User Configuration” command if available. Do not guess a user configuration path across operating systems, profiles, containers, or remote workspaces; check the client documentation. Merge this example with existing settings; do not overwrite unrelated servers.
No install command stated in the README — see repo. Check the client documentation for a supported connection method.
Read the VS Code setup guideConfig file · macOS/Linux: ~/.codeium/windsurf/mcp_config.json
Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json
Open the MCP configuration through Windsurf’s settings when possible to confirm the active file. Paths can differ in managed or future releases; check the client documentation if this location is not present. Merge this example with existing settings; do not overwrite unrelated servers.
No install command stated in the README — see repo. Check the client documentation for a supported connection method.
Read the Windsurf setup guideConfig file · Project scope: .mcp.json at the repository root
The project file uses mcpServers. For user scope, use claude mcp add --scope user rather than assuming .mcp.json in your home directory is the user configuration. Check the client documentation for managed settings and storage details. Merge this example with existing settings; do not overwrite unrelated servers.
No install command stated in the README — see repo. Check the client documentation for a supported connection method.
Read the Claude Code setup guideExamples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Tools
Source: repository README. Tool descriptions are a documented snapshot, not a live capability check.
| Tool | What it does |
|---|---|
| get-component-tree | Inspect the Vue component hierarchy. |
| get-component-state | Read state for a named component. |
| edit-component-state | Change a component state value at a selected path. |
| highlight-component | Visually highlight a named component in the running app. |
| get-router-info | Inspect the application router information. |
| get-pinia-tree | Inspect the Pinia store hierarchy. |
| get-pinia-state | Read state from a named Pinia store. |
Names, permissions, and defaults can change. Check the current upstream documentation before granting access.
Use cases
- Inspect a running Vue app’s component hierarchy
- Read or edit a component’s state from an assistant
- Review routing information and Pinia store state
- Highlight components during browser-based debugging
Strengths
- Exposes live Vue and Pinia state alongside component structure
- Includes state editing and component highlighting
- Can update Cursor configuration automatically
Limitations
- The app must be running in a browser
- A custom server replacement disables the built-in tools
- Requires Vite plugin registration, not just package installation
Frequently asked questions
Independent listing, not an affiliation or security review. Grant the least access needed and verify the upstream instructions before running code.
