Project 25: Chat App Interface
Vue Engineer
Component Task
Objective
Review day: combine router and components — days 15 and 10 — so a route parameter flows in as a prop.
You're building a chat app's channel routing.
Task: configure a route /chat/:channelId that renders ChatWindow with props: true, and a ChatWindow component that accepts and displays channelId.
Component.vue
<!-- router.js -->
import { createRouter, createWebHistory } from 'vue-router';
import ChatWindow from './ChatWindow.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/chat/:channelId', component: ChatWindow, props: true }
]
});
export default router;
<!-- ChatWindow.vue -->
<script setup>
defineProps(['channelId']);
</script>
<template>
<h2>Channel: {{ channelId }}</h2>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result