Project 30: Admin Dashboard

Vue Engineer

Component Task

Objective

Capstone: composables, provide/inject, lifecycle, and computed properties all together — the full shape of a real feature, not just one concept in isolation.

You're building an admin dashboard's auth gate.

Task: write a useAuth composable with a user ref, an isAdmin computed, and a login function; provide it from AdminDashboard (logging in on mount) and consume it from a child DashboardStats component.

Component.vue

<!-- useAuth.js -->
import { ref, computed } from 'vue';

export function useAuth() {
  const user = ref(null);
  const isAdmin = computed(() => user.value?.role === 'admin');

  function login(name, role) {
    user.value = { name, role };
  }

  return { user, isAdmin, login };
}

<!-- AdminDashboard.vue -->
<script setup>
import { provide, onMounted } from 'vue';
import { useAuth } from './useAuth';
import DashboardStats from './DashboardStats.vue';

const { user, isAdmin, login } = useAuth();
provide('auth', { user, isAdmin });

onMounted(() => {
  login('Jordan Lee', 'admin');
});
</script>
<template>
  <h1 v-if="isAdmin">Admin Dashboard</h1>
  <DashboardStats v-if="isAdmin" />
</template>

<!-- DashboardStats.vue -->
<script setup>
import { inject } from 'vue';

const auth = inject('auth');
</script>
<template>
  <p>Welcome, {{ auth.user.value.name }}</p>
</template>

* Hint: Correct characters turn green, incorrect ones turn red.

Build Output

🟢

Build your component to see the result

← Previous