GPT

Example Components

{{ error }} <input v-model="email" type="email" placeholder="Email" required / <input v-model="password" type="password" placeholder="Password" required / {{ isSignUp ? 'Sign Up' : 'Sign In' }} <bu

Prompt text

Original English text. Replace placeholders with your own details.

<!-- components/Auth.vue -->
<template>
 <div>
 <div v-if="error" class="error">{{ error }}</div>
 
 <form @submit.prevent="handleSubmit" v-if="!user">
 <input
 v-model="email"
 type="email"
 placeholder="Email"
 required
 />
 <input
 v-model="password"
 type="password"
 placeholder="Password"
 required
 />
 <button type="submit" :disabled="loading">
 {{ isSignUp ? 'Sign Up' : 'Sign In' }}
 </button>
 <button
 type="button"
 @click="signInWithGoogle"
 :disabled="loading"
 >
 Sign in with Google
 </button>
 <a href="#" @click.prevent="isSignUp = !isSignUp">
 {{ isSignUp ? 'Already have an account?' : 'Need an account?' }}
 </a>
 </form>

 <div v-else>
 <p>Welcome, {{ user.email }}</p>
 <button @click="signOut" :disabled="loading">Sign Out</button>
 </div>
 </div>
</template>

<script setup lang="ts">
const {
 user,
 loading,
 error,
 signInWithEmail,
 signUpWithEmail,
 signInWithGoogle,
 signOut
} = useAuth()

const email = ref('')
const password = ref('')
const isSignUp = ref(false)

const handleSubmit = async () => {
 if (isSignUp.value) {
 await signUpWithEmail(email.value, password.value)
 } else {
 await signInWithEmail(email.value, password.value)
 }
}
</script>

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 →