Project 16: Login Screen
Vue Engineer
Component Task
Objective
Review day: combine reactivity and methods — days 3 and 5 — into a real form.
You're building a login screen.
Task: create username and password refs bound with v-model, and a login method logging the username, called from a button.
Component.vue
<script setup>
import { ref } from 'vue';
const username = ref('');
const password = ref('');
function login() {
console.log('Logging in as', username.value);
}
</script>
<template>
<input v-model="username" placeholder="Username">
<input v-model="password" type="password" placeholder="Password">
<button @click="login">Log In</button>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result