ndabAP/vue-command

A fully working, most feature-rich Vue.js terminal emulator. Now with Vue.js 3 support!

Summary

vue-command is a Vue.js component that renders an interactive terminal emulator inside a web application. Unlike simpler libraries, its commands are real Vue components that can inject terminal state, which makes it possible to build fullscreen editors, dashboards, and other rich UIs behind a shell-like interface.

What it is useful for

Engineers reach for vue-command when they want a shell-style interface inside a Vue application without writing a parser, history buffer, or autocompletion from scratch. It fits teaching tools that demonstrate CLI behavior, admin dashboards for local services, interactive demos, and games presented as terminals. The README lists adopters such as escrcpy (Android control via scrcpy), a docker management dashboard, ts-git, and Venom, a command-and-control framework. The component covers the usual shell ergonomics: history navigation with the arrow keys, history search with Ctrl+r, autocompletion with Tab, multiline input with a trailing backslash, and a fullscreen mode that any command component can request.

How engineers can use it

The README documents installation with npm install vue-command --save. After importing the component and its CSS, a minimal setup registers commands as an object whose values are functions that receive parsed arguments and return a Vue component or a helper-produced output. The simplest example maps hello-world to () => createStdout('Hello world'). A more advanced example registers a nano command that returns a NanoEditor component; that component injects exit, setFullscreen, and terminal, calls setFullscreen(true) in created, focuses its textarea on mount, and calls exit when the user presses Ctrl+x. Beyond commands, the library exposes helpers like createStdout, createStderr, createCommandNotFound, and formatters (listFormatter, tableFormatter, jsonFormatter, textFormatter), plus slots for customizing the bar, buttons, title, and prompt. Advanced integrations cover custom parsers, interpreters, options resolvers, and event resolvers. The README also notes some limitations: ResizeObserver is used, so a polyfill may be needed for older browsers; SIGINT is the only implemented signal; and draggable terminals, additional events, and more key combinations are listed as unimplemented nice-to-haves.