Overview
What is Nuxt?
Nuxt is a Vue.js framework that provides server-side rendering, file-based routing, and a powerful module ecosystem for building modern web applications.
How do I get started?
You can create a new Nuxt project by running `npx nuxi@latest init my-app`. This will scaffold a new project with the recommended configuration.
Installation
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-messages.json"
Usage
<script setup lang="ts">
import { Copy } from '@lucide/vue'
import { ChatMessages } from '@/components/chat-messages'
const assistant = {
actions: [{ label: 'Copy message', icon: Copy }]
}
</script>
<template>
<ChatMessages :messages="messages" :status="status" :assistant="assistant" should-auto-scroll />
</template>Examples
Default
What is Nuxt?
Nuxt is a Vue.js framework that provides server-side rendering, file-based routing, and a powerful module ecosystem for building modern web applications.
How do I get started?
You can create a new Nuxt project by running `npx nuxi@latest init my-app`. This will scaffold a new project with the recommended configuration.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
messages | UIMessage[] | [] | Array of messages to display. |
status | 'ready' | 'streaming' | 'submitted' | 'error' | 'ready' | Current chat status. Shows loading indicator when submitted. |
shouldAutoScroll | boolean | false | Enable auto-scroll to bottom on new messages. |
assistant | { actions?: ChatMessageAction[] } | — | Assistant-specific configuration. Action icons are Vue components passed through to ChatMessage. |
class | string | — | Additional CSS classes. |
Slots
| Slot | Props | Description |
|---|---|---|
content | { message, index, id, role, parts } | Custom message content renderer. |
indicator | — | Custom loading indicator (shown when status is submitted). |