0Pricing
Vue Academy · Lesson

Building a Real-Time Chat Component

Message list with v-for, input binding, emit on submit, scroll to bottom on new message.

Goal: A Live Chat Box

We will assemble a small but complete chat component: it shows a scrolling list of messages, lets the user type and send, and appends incoming messages in real time.

This ties together reactive state, lifecycle hooks, and DOM access.

The Messages Ref

Hold the conversation in a reactive array. Each entry is a simple object with an id, author, and text.

import { ref } from "vue"

const messages = ref([
  { id: 1, user: "system", text: "Welcome to the room" },
])

All lessons in this course

  1. WebSocket Basics in the Browser
  2. Socket.io Client with Vue
  3. Building a Real-Time Chat Component
  4. useWebSocket Composable with Reconnection
← Back to Vue Academy