Vue MCP Server

<template> <div class="count-card"> <h2 class="title">Count Component</h2> <div class="count-display">{{ count }}</div> <div class="button-group"> <button class="btn" @click="decrease">-</button> <button class="btn" @click="increase">+</button> </div> </div> </template> <script setup> import { ref } from 'vue' const count = ref(0) const increase = () => { count.value++ } const decrease = () => { count.value-- } </script> <style scoped> .count-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 300px; text-align: center; } .title { color: #2c3e50; margin: 0 0 20px 0; font-size: 1.5rem; } .count-display { font-size: 3rem; font-weight: bold; color: #42b883; margin: 20px 0; } .button-group { display: flex; justify-content: center; gap: 20px; } .btn { background: #42b883; color: white; border: none; padding: 10px 25px; border-radius: 6px; font-size: 1.2rem; cursor: pointer; transition: background 0.3s; } .btn:hover { background: #3aa876; } .btn:active { transform: scale(0.98); } </style>