GPT

Example Components

{{ error }} <input v-model="newTodo" type="text" placeholder="New todo" required / Add Todo {{ todo.text }} <button @click="deleteTodo(todo.id)" :disabled="loading" Delete interfac

Prompt text

Original English text. Replace placeholders with your own details.

<!-- components/TodoList.vue -->
<template>
 <div>
 <div v-if="error" class="error">{{ error }}</div>

 <form @submit.prevent="handleSubmit">
 <input
 v-model="newTodo"
 type="text"
 placeholder="New todo"
 required
 />
 <button type="submit" :disabled="loading">Add Todo</button>
 </form>

 <ul v-if="todos.data">
 <li v-for="todo in todos.data" :key="todo.id">
 <span>{{ todo.text }}</span>
 <button
 @click="deleteTodo(todo.id)"
 :disabled="loading"
 >
 Delete
 </button>
 </li>
 </ul>
 </div>
</template>

<script setup lang="ts">
interface Todo {
 id: string
 text: string
 completed: boolean
 createdAt: Date
}

const newTodo = ref('')
const todos = useFirestoreCollection<Todo>('todos', {
 orderBy: [['createdAt', 'desc']]
})

const handleSubmit = async () => {
 if (!newTodo.value.trim()) return

 await todos.add({
 text: newTodo.value,
 completed: false,
 createdAt: new Date()
 })

 newTodo.value = ''
}

const deleteTodo = async (id: string) => {
 const todo = useFirestoreDocument<Todo>('todos', id)
 await todo.remove()
}
</script>

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →