GPT

Firestore Data Management Component

import { ref } from 'vue'; import { useCollection, useDocument } from 'vuefire'; import { collection, doc, addDoc, updateDoc, deleteDoc, query, orderBy, limit } from 'firebase/firestore'; import { db } from '../firebase'

Prompt text

Original English text. Replace placeholders with your own details.

<script setup lang="ts">
import { ref } from 'vue';
import { useCollection, useDocument } from 'vuefire';
import { collection, doc, addDoc, updateDoc, deleteDoc, query, orderBy, limit } from 'firebase/firestore';
import { db } from '../firebase';

// Collection reference
const todosCollection = collection(db, 'todos');

// Query with ordering and limit
const todosQuery = query(
 todosCollection,
 orderBy('createdAt', 'desc'),
 limit(10)
);

// Use the collection
const todos = useCollection(todosQuery);

// New todo form
const newTodo = ref('');
const loading = ref(false);
const error = ref<string | null>(null);

// Add new todo
const addTodo = async () => {
 if (!newTodo.value.trim()) return;
 
 loading.value = true;
 error.value = null;
 
 try {
 await addDoc(todosCollection, {
 text: newTodo.value,
 completed: false,
 createdAt: new Date()
 });
 newTodo.value = '';
 } catch (err: any) {
 error.value = err.message;
 } finally {
 loading.value = false;
 }
};

// Toggle todo completion
const toggleTodo = async (todoId: string, completed: boolean) => {
 const todoRef = doc(db, 'todos', todoId);
 try {
 await updateDoc(todoRef, {
 completed: !completed
 });
 } catch (err: any) {
 console.error('Failed to toggle todo:', err);
 }
};

// Delete todo
const deleteTodo = async (todoId: string) => {
 const todoRef = doc(db, 'todos', todoId);
 try {
 await deleteDoc(todoRef);
 } catch (err: any) {
 console.error('Failed to delete todo:', err);
 }
};
</script>

<template>
 <div>
 <form @submit.prevent="addTodo">
 <input
 v-model="newTodo"
 placeholder="Add new todo"
 :disabled="loading"
 />
 <button type="submit" :disabled="loading">
 {{ loading ? 'Adding...' : 'Add Todo' }}
 </button>
 </form>
 
 <p v-if="error" class="error">{{ error }}</p>
 
 <ul>
 <li v-for="todo in todos" :key="todo.id">
 <input
 type="checkbox"
 :checked="todo.completed"
 @change="toggleTodo(todo.id, todo.completed)"
 />
 <span :class="{ completed: todo.completed }">
 {{ todo.text }}
 </span>
 <button @click="deleteTodo(todo.id)">Delete</button>
 </li>
 </ul>
 </div>
</template>

<style scoped>
.completed {
 text-decoration: line-through;
 color: #888;
}
</style>

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 →