GPT

Usage in Vue Components

import { ref, onMounted } from 'vue' import { DatabaseService } from '@/lib/database' interface Item { name: string } const items = ref ([]) const newItem = ref('') const db = new DatabaseService({ databaseId: 'your

Prompt text

Original English text. Replace placeholders with your own details.

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { DatabaseService } from '@/lib/database'

interface Item {
 name: string
}

const items = ref<Item[]>([])
const newItem = ref('')

const db = new DatabaseService({
 databaseId: 'your-database-id',
 collectionId: 'your-collection-id'
})

onMounted(async () => {
 const response = await db.listDocuments<Item>()
 items.value = response.documents
})

const addItem = async () => {
 const item = await db.createDocument<Item>({ name: newItem.value })
 items.value.push(item as Item)
 newItem.value = ''
}
</script>

<template>
 <div>
 <ul>
 <li v-for="item in items" :key="item.$id">
 {{ item.name }}
 </li>
 </ul>
 <input v-model="newItem" />
 <button @click="addItem">Add Item</button>
 </div>
</template>

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 →