GPT

Correct Component Usage

import { ref } from 'vue' import { useAuth } from '@/composables/useAuth' const { user, loading, signIn, signOut } = useAuth() const email = ref('') const password = ref('') const handleSignIn = async () = { try { aw

Prompt text

Original English text. Replace placeholders with your own details.

<script setup lang="ts">
import { ref } from 'vue'
import { useAuth } from '@/composables/useAuth'

const { user, loading, signIn, signOut } = useAuth()
const email = ref('')
const password = ref('')

const handleSignIn = async () => {
 try {
 await signIn(email.value, password.value)
 } catch (error) {
 console.error('Authentication failed:', error)
 }
}
</script>

<template>
 <div v-if="loading">Loading...</div>
 <div v-else-if="user">
 <p>Welcome, {{ user.email }}</p>
 <button @click="signOut">Sign Out</button>
 </div>
 <form v-else @submit.prevent="handleSignIn">
 <input v-model="email" type="email" required />
 <input v-model="password" type="password" required />
 <button type="submit">Sign In</button>
 </form>
</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 →