GPT

Pages Implementation

const { users, loading, error, createUser, deleteUser } = useUsers() const newUser = ref({ email: '', name: '' }) const handleSubmit = async () = { await createUser(newUser.value) newUser.value = { email: '', name: ''

Prompt text

Original English text. Replace placeholders with your own details.

<script setup lang="ts">
const { users, loading, error, createUser, deleteUser } = useUsers()
const newUser = ref({ email: '', name: '' })

const handleSubmit = async () => {
 await createUser(newUser.value)
 newUser.value = { email: '', name: '' }
}
</script>

<template>
 <div>
 <h1>Users</h1>

 <div v-if="error" class="error">
 {{ error }}
 </div>

 <form @submit.prevent="handleSubmit" class="form">
 <input
 v-model="newUser.email"
 type="email"
 placeholder="Email"
 required
 />
 <input
 v-model="newUser.name"
 type="text"
 placeholder="Name"
 />
 <button type="submit" :disabled="loading">Add User</button>
 </form>

 <div v-if="loading">Loading...</div>

 <ul v-else class="list">
 <li v-for="user in users" :key="user.id" class="list-item">
 <span>{{ user.name }} ({{ user.email }})</span>
 <button
 @click="deleteUser(user.id)"
 :disabled="loading"
 >
 Delete
 </button>
 </li>
 </ul>
 </div>
</template>

<style scoped>
.error {
 color: red;
 margin-bottom: 1rem;
}

.form {
 margin-bottom: 2rem;
}

.form input {
 margin-right: 0.5rem;
}

.list {
 list-style: none;
 padding: 0;
}

.list-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0.5rem;
 border-bottom: 1px solid #eee;
}

.list-item button {
 margin-left: 1rem;
}
</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 →