GPT

Vue Components Implementation

import { ref, onMounted } from 'vue' import { userService } from '@/services/users' import type { User } from '@prisma/client' const users = ref ([]) const newUser = ref({ email: '', name: '' }) const error = ref('') o

Prompt text

Original English text. Replace placeholders with your own details.

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { userService } from '@/services/users'
import type { User } from '@prisma/client'

const users = ref<User[]>([])
const newUser = ref({ email: '', name: '' })
const error = ref('')

onMounted(async () => {
 try {
 users.value = await userService.getUsers()
 } catch (e) {
 error.value = 'Failed to load users'
 }
})

async function createUser() {
 try {
 const user = await userService.createUser(newUser.value)
 users.value.push(user)
 newUser.value = { email: '', name: '' }
 } catch (e) {
 error.value = 'Failed to create user'
 }
}

async function deleteUser(id: number) {
 try {
 await userService.deleteUser(id)
 users.value = users.value.filter(user => user.id !== id)
 } catch (e) {
 error.value = `Failed to delete user ${id}`
 }
}
</script>

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

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

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

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

form {
 margin-bottom: 1rem;
}

input {
 margin-right: 0.5rem;
}

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

li {
 margin-bottom: 0.5rem;
}

button {
 margin-left: 0.5rem;
}
</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 →