webfansplz_vite_plugin_vue_mcp
by webfansplzVite Plugin for Vue MCP Server
Overview
The Vite Plugin for Vue MCP Server is a powerful tool designed to enhance the development experience for Vue.js applications. It integrates a Model Context Protocol (MCP) server, providing detailed insights into your Vue app's component tree, state, routes, and Pinia store. This plugin is particularly useful for developers looking to streamline debugging and improve their understanding of application structure.
Installation
To install the plugin, use the following command:
pnpm install vite-plugin-vue-mcp -D
Configuration
Add the plugin to your vite.config.ts file:
import { VueMcp } from 'vite-plugin-vue-mcp'
export default defineConfig({
plugins: [VueMcp()],
})
Once configured, the MCP server will be available at http://localhost:[port]/__mcp/sse.
Options
The plugin supports several configuration options:
export interface VueMcpOptions {
host?: string
printUrl?: boolean
mcpServerInfo?: McpServerInfo
mcpServer?: (viteServer: ViteDevServer) => Awaitable<McpServer>
mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable<void | McpServer>
mcpPath?: string
updateCursorMcpJson?: boolean | {
enabled: boolean
serverName?: string
}
appendTo?: string | RegExp
}
Features/Tools
Get Component Tree
Retrieve the Vue component tree.
Get Component State
Fetch the state of a specific component.
Edit Component State
Modify the state of a component.
Highlight Component
Highlight a component in the UI.
Get Routes
Retrieve Vue router information.
Get Pinia Tree
Fetch the Pinia store tree.
Get Pinia State
Retrieve the state of a specific Pinia store.
Architecture
The plugin's architecture is designed to seamlessly integrate with Vite and Vue, providing a robust MCP server for enhanced development insights.
Notice
Ensure the application is running in your browser before using the features.
Credits
This project is inspired by vite-plugin-mcp. Special thanks to @antfu for their contributions.
Invite Gmail Contacts
