GPT

Component Example

import { ref, onMounted } from 'vue'; import { useUsers } from '@/composables/useUsers'; import type { NewUser } from '@/db/schema'; const { users, loading, error, fetchUsers, createUser, updateUser, deleteUser }

Prompt text

Original English text. Replace placeholders with your own details.

<!-- src/components/UserList.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useUsers } from '@/composables/useUsers';
import type { NewUser } from '@/db/schema';

const {
 users,
 loading,
 error,
 fetchUsers,
 createUser,
 updateUser,
 deleteUser
} = useUsers();

const newUser = ref<NewUser>({
 name: '',
 email: '',
});

onMounted(() => {
 fetchUsers();
});

const handleSubmit = async () => {
 try {
 await createUser(newUser.value);
 newUser.value = { name: '', email: '' };
 } catch (error) {
 console.error('Failed to create user:', error);
 }
};
</script>

<template>
 <div>
 <h2>Users</h2>

 <div v-if="loading">Loading...</div>
 <div v-else-if="error" class="error">{{ error }}</div>

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

 <ul v-if="users.length">
 <li v-for="user in users" :key="user.id">
 {{ user.name }} ({{ user.email }})
 <button @click="deleteUser(user.id)">Delete</button>
 </li>
 </ul>
 <p v-else>No users found.</p>
 </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 →