Vitral 0.2
Misc

Terminal

A prompt and a log, for a console inside an application, with a command history.

WAI-ARIA tested

Import

main.ts
import { Terminal } from '@vitral/vue';

Basic

Welcome to Vitral. Type "help" to begin.
<script setup lang="ts">import { Terminal, type TerminalCommandEvent } from '@vitral/vue'; function run({ command, respond }: TerminalCommandEvent) {    const [name, ...args] = command.trim().split(/\s+/);    switch (name) {        case 'date':            respond(new Date().toLocaleString());            break;        case 'greet':            respond(`Hello, ${args.join(' ') || 'world'}!`);            break;        case 'random':            respond(String(Math.floor(Math.random() * 100)));            break;        case 'help':            respond('Commands: date, greet <name>, random');            break;        default:            respond(`Unknown command: ${name}. Type "help".`);    }}</script> <template>    <Terminal welcome-message="Welcome to Vitral. Type &quot;help&quot; to begin." prompt="vitral $" aria-label="Console output" @command="run" /></template>

API

Read from packages/vue/src/components/Terminal/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
welcomeMessagestringShown above the first command.
promptstringWhat each line starts with. Defaults to `'$'`.
inputLabelstringNames the command line. Defaults to the locale's "Command".

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
commandevent: TerminalCommandEvent—

Slots

NameSlot propsDescription
welcome—Replaces the welcome message.