Code-MCP

<script setup lang="ts"> import { ref, computed, onMounted, watch } from 'vue' // ============================================ // Types // ============================================ interface User { id: number name: string email: string } interface Todo { id: number text: string completed: boolean } // ============================================ // Composables (Reusable Logic) // ============================================ // useFetch - Data fetching with loading/error states function useFetch<T>(url: string) { const data = ref<T | null>(null) const loading = ref(true) const error = ref<Error | null>(null) const fetchData = async () => { loading.value = true error.value = null try { const res = await fetch(url) if (!res.ok) throw new Error(`HTTP ${res.status}`) data.value = await res.json() } catch (e) { error.value = e as Error } finally { loading.value = false } } onMounted(fetchData) return { data, loading, error, refetch: fetchData } } // useLocalStorage - Persistent state function useLocalStorage<T>(key: string, defaultValue: T) { const storedValue = localStorage.getItem(key) const data = ref<T>(storedValue ? JSON.parse(storedValue) : defaultValue) watch(data, (newValue) => { localStorage.setItem(key, JSON.stringify(newValue)) }, { deep: true }) return data } // ============================================ // Component State & Logic // ============================================ // Reactive state const count = ref(0) const newTodo = ref('') const todos = useLocalStorage<Todo[]>('todos', []) // Computed properties const completedCount = computed(() => todos.value.filter(t => t.completed).length ) const remainingCount = computed(() => todos.value.length - completedCount.value ) // Methods function increment() { count.value++ } function addTodo() { if (!newTodo.value.trim()) return todos.value.push({ id: Date.now(), text: newTodo.value.trim(), completed: false }) newTodo.value = '' } function removeTodo(id: number) { const index = todos.value.findIndex(t => t.id === id) if (index !== -1) { todos.value.splice(index, 1) } } function toggleTodo(id: number) { const todo = todos.value.find(t => t.id === id) if (todo) { todo.completed = !todo.completed } } // Data fetching example const { data: users, loading: usersLoading, error: usersError } = useFetch<User[]>( 'https://jsonplaceholder.typicode.com/users' ) </script> <template> <div class="app"> <!-- Counter Example --> <section class="counter"> <h2>Counter: {{ count }}</h2> <button @click="increment">Increment</button> <button @click="count--">Decrement</button> <button @click="count = 0">Reset</button> </section> <!-- Todo List Example --> <section class="todos"> <h2>Todo List</h2> <p>{{ remainingCount }} remaining, {{ completedCount }} completed</p> <form @submit.prevent="addTodo" class="todo-form"> <input v-model="newTodo" placeholder="Add a todo..." class="todo-input" /> <button type="submit">Add</button> </form> <ul class="todo-list"> <li v-for="todo in todos" :key="todo.id" :class="{ completed: todo.completed }" > <input type="checkbox" :checked="todo.completed" @change="toggleTodo(todo.id)" /> <span>{{ todo.text }}</span> <button @click="removeTodo(todo.id)">×</button> </li> </ul> </section> <!-- Data Fetching Example --> <section class="users"> <h2>Users (Fetched)</h2> <div v-if="usersLoading">Loading...</div> <div v-else-if="usersError" class="error"> Error: {{ usersError.message }} </div> <ul v-else> <li v-for="user in users" :key="user.id"> {{ user.name }} ({{ user.email }}) </li> </ul> </section> </div> </template> <style scoped> .app { max-width: 600px; margin: 0 auto; padding: 20px; } section { margin-bottom: 30px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; } button { padding: 8px 16px; margin: 4px; cursor: pointer; } .todo-form { display: flex; gap: 8px; margin-bottom: 16px; } .todo-input { flex: 1; padding: 8px; } .todo-list { list-style: none; padding: 0; } .todo-list li { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #eee; } .todo-list li.completed span { text-decoration: line-through; color: #888; } .error { color: red; } </style>