GPT

Page Components

import type { NewUser } from '~/server/db/schema'; const { users, loading, error, fetchUsers, createUser, deleteUser } = useUsers(); const newUser = ref ({ name: '', email: '', }); onMounted(() = { fetchUsers

Prompt text

Original English text. Replace placeholders with your own details.

<!-- pages/users/index.vue -->
<script setup lang="ts">
import type { NewUser } from '~/server/db/schema';

const {
 users,
 loading,
 error,
 fetchUsers,
 createUser,
 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>
 <h1>Users</h1>

 <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>

<!-- pages/users/[id].vue -->
<script setup lang="ts">
const route = useRoute();
const router = useRouter();

const id = parseInt(route.params.id as string);
const { getUser, updateUser } = useUsers();

const user = ref(await getUser(id));

const handleSubmit = async (e: Event) => {
 const form = e.target as HTMLFormElement;
 const formData = new FormData(form);

 try {
 await updateUser(id, {
 name: formData.get('name') as string,
 email: formData.get('email') as string,
 });
 router.push('/users');
 } catch (error) {
 console.error('Failed to update user:', error);
 }
};
</script>

<template>
 <div>
 <h1>Edit User</h1>

 <form @submit.prevent="handleSubmit">
 <input
 name="name"
 :value="user.name"
 placeholder="Name"
 required
 />
 <input
 name="email"
 type="email"
 :value="user.email"
 placeholder="Email"
 required
 />
 <button type="submit">Update User</button>
 </form>
 </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 →