npm create vue@latest p2
cd p2
npm install
npm run dev






src/components/StudentCard.vue :
<script setup>
defineProps(['student', 'role'])
defineEmits(['remove'])
</script>
<template>
  <div class="student-card">
    <div>
      <h3>{{ student.name }}</h3>
      <p>{{ student.email }}</p>
      <small>{{ student.course }}</small>
    </div>

    <button v-if="role === 'Admin'"
            @click="$emit('remove', student.id)">
      Remove
    </button>
  </div>
</template>







src/components/StudentList.vue :
<script setup>
import StudentCard from './StudentCard.vue'
defineProps(['students', 'role'])
defineEmits(['remove'])
</script>
<template>
  <div>
    <h2>Student List</h2>
    <StudentCard
      v-for="student in students"
      :key="student.id"
      :student="student"
      :role="role"
      @remove="$emit('remove', $event)"
    />
    <p v-if="students.length === 0">No students found.</p>
  </div>
</template>







src/components/AddStudentForm.vue :
<script setup>
import { ref } from 'vue'
const name = ref('')
const email = ref('')
const course = ref('')
const emit = defineEmits(['add'])
function submitForm() {
  if (!name.value || !email.value || !course.value) return
  emit('add', {
    id: Date.now(),
    name: name.value,
    email: email.value,
    course: course.value
  })
  name.value = ''
  email.value = ''
  course.value = ''
}
</script>
<template>
  <form @submit.prevent="submitForm">
    <h2>Add Student</h2>
    <input v-model="name" placeholder="Student Name" required>
    <input v-model="email" type="email" placeholder="Email" required>
    <input v-model="course" placeholder="Course" required>
    <button>Add Student</button>
  </form>
</template>







src/components/Dashboard.vue :
<script setup>
import StudentList from './StudentList.vue'
import AddStudentForm from './AddStudentForm.vue'
defineProps(['students', 'role'])
defineEmits(['add', 'remove'])
</script>
<template>
  <main :class="role.toLowerCase()">
    <h1>Student Dashboard</h1>
    <h3>Logged in as: {{ role }}</h3>
    <AddStudentForm
      v-if="role === 'Admin'"
      @add="$emit('add', $event)"
    />
    <StudentList
      :students="students"
      :role="role"
      @remove="$emit('remove', $event)"
    />
  </main>
</template>







src/App.vue :
<script setup>
import { ref } from 'vue'
import Dashboard from './components/Dashboard.vue'
const role = ref('Admin')
const students = ref([
  { id: 1, name: 'Son Goku', email: 'goku@gmail.com', course: 'Computer Science' },
  { id: 2, name: 'Mario', email: 'mario@gmail.com', course: 'Information Technology' },
  { id: 3, name: 'Amit Shah', email: 'amit@gmail.com', course: 'Data Science' }
])
function addStudent(student) {
  students.value.push(student)
}
function removeStudent(id) {
  students.value = students.value.filter(s => s.id !== id)
}
</script>
<template>
  <div class="app">
    <label>Switch Role:</label>
    <select v-model="role">
      <option>Admin</option>
      <option>Student</option>
      <option>Guest</option>
    </select>

    <Dashboard
      :students="students"
      :role="role"
      @add="addStudent"
      @remove="removeStudent"
    />
  </div>
</template>






src/main.js :
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')





src/style.css :
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f1f5f9;
  color: #1e293b;
}
.app {
  padding: 25px;
  max-width: 850px;
  margin: auto;
}
main {
  margin-top: 20px;
  padding: 25px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 20px #0001;
}
h1 { color: #334155; }
input, select, button {
  padding: 11px;
  margin: 6px 0;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
}
input { width: 100%; }
button {
  background: #2563eb;
  color: white;
  border: none;
  cursor: pointer;
}
button:hover { opacity: .85; }
form {
  background: #f8fafc;
  padding: 18px;
  border-radius: 10px;
  margin: 20px 0;
}
.student-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin: 12px 0;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
}
.student-card p { color: #64748b; }
.student-card h3 { margin: 0; }
.admin { border-top: 5px solid #7c3aed; }
.student { border-top: 5px solid #2563eb; }
.guest { border-top: 5px solid #059669; }
.student button { display: none; }