@qodalis/vue-cli

Qodalis CLI

A web terminal for Angular, React, Vue and plain TypeScript, extended through command modules.

Qodalis CLI renders an xterm.js terminal in your app with a shell-like command line, built-in commands, themes and a runtime package manager. You add commands as modules (ICliModule): the 40 official plugins, your own commands, or packages installed at runtime with pkg add. It can also connect to a Node.js, .NET or Python backend to run server-side commands.

Try it online

Starter projects for each framework, using the published npm packages:

Framework	StackBlitz	CodeSandbox	Gitpod	Repository
Angular				source
React				source
Vue				source
Vanilla TypeScript				source

Or try the terminal and write your own commands in the docs playground.

Install

Plugins are separate packages, for example npm install @qodalis/cli-guid.

Quick start

Each example shows a terminal with the guid plugin. Pass any number of modules.

Angular

Angular 22 or later. Add the stylesheet to angular.json:

"styles": ["node_modules/@qodalis/angular-cli/src/assets/styles.css"]

import { Component } from '@angular/core';
import { CliModule } from '@qodalis/angular-cli';
import { ICliModule } from '@qodalis/cli-core';
import { guidModule } from '@qodalis/cli-guid';

@Component({
    selector: 'app-root',
    imports: [CliModule],
    template: `<cli [modules]="modules" height="100vh" />`,
})
export class AppComponent {
    modules: ICliModule[] = [guidModule];
}

<cli-panel> is a collapsible panel docked to the page. To register modules app-wide through DI instead of the modules input, add resolveCliModuleProvider(guidModule) to your providers.

React

React 18 or 19.

import '@qodalis/react-cli/styles.css';
import { Cli } from '@qodalis/react-cli';
import { guidModule } from '@qodalis/cli-guid';

export function App() {
    return <Cli modules={[guidModule]} style={{ height: '100vh' }} />;
}

Vue

<script setup lang="ts">
import '@qodalis/vue-cli/styles.css';
import { Cli } from '@qodalis/vue-cli';
import { guidModule } from '@qodalis/cli-guid';
</script>

<template>
    <Cli :modules="[guidModule]" :style="{ height: '100vh' }" />
</template>

React and Vue also export CliPanel, and CliConfigProvider to share modules and options with every terminal below it.

Vanilla TypeScript

import '@qodalis/cli/assets/styles.css';
import { CliEngine } from '@qodalis/cli';
import { guidModule } from '@qodalis/cli-guid';

const engine = new CliEngine(document.getElementById('terminal')!);
engine.registerModule(guidModule);
await engine.start();

Your own commands

A command is an ICliCommandProcessor; a module groups processors (and optional services, translations and lifecycle hooks):

import {
    API_VERSION,
    CliProcessCommand,
    ICliCommandProcessor,
    ICliExecutionContext,
    ICliModule,
} from '@qodalis/cli-core';

class GreetCommandProcessor implements ICliCommandProcessor {
    command = 'greet';
    description = 'Greet someone by name';
    valueRequired = true;

    async processCommand(command: CliProcessCommand, context: ICliExecutionContext): Promise<void> {
        context.writer.writeSuccess(`Hello, ${command.value}!`);
    }
}

export const greetModule: ICliModule = {
    apiVersion: API_VERSION,
    name: 'my-app-commands',
    processors: [new GreetCommandProcessor()],
};

Register it like any plugin: the modules input/prop, resolveCliModuleProvider(greetModule) in Angular, or engine.registerModule(greetModule). To publish a reusable plugin, scaffold it with npx @qodalis/create-cli-plugin. See Core concepts and Create a plugin.

Configuration

Options go to the options input/prop or the CliEngine constructor:

import { CliEngineOptions } from '@qodalis/cli';

const options: CliEngineOptions = {
    welcome: { message: 'Welcome to My App', show: 'daily' }, // or false
    servers: [{ name: 'node', url: 'http://localhost:8047' }],
    terminalOptions: { fontSize: 14 },
};

All options are listed in Configuration.

Features

• Shell-like command line: &&, ||, ;, pipes, >/>> redirects, aliases, history search, tab completion and readline shortcuts (hotkeys lists them).
• Built-in commands: help, theme, pkg, history, alias, json, diff, random, timestamp, convert, color, clipboard, ps/kill, htop and more. See Built-in commands.
• Runtime packages: pkg add guid installs a plugin from npm (unpkg or jsdelivr) without rebuilding the app.
• Interactive input: line, password, confirm, select, multi-select and number prompts, progress bars, spinners and a full-screen mode for editors and games.
• Themes: 29 built-in themes, custom colors and fonts.
• Panel: a dockable panel with tabs, split panes, resizing and maximize.
• Users and permissions (users plugin): login, su, groups, permissions and per-user history.
• Server integration: run commands on a backend, stream output, open a remote shell, browse the server filesystem, query databases with the data explorer.
• i18n: 10 language packs.

Plugins

Install from npm and pass the module, or run pkg add <name> in the terminal.

Games: @qodalis/cli-2048 (game2048Module), @qodalis/cli-minesweeper, @qodalis/cli-snake, @qodalis/cli-sudoku, @qodalis/cli-tetris, @qodalis/cli-wordle.

Language packs: @qodalis/cli-lang-<code> for de, es, fr, it, ja, ko, pt, ro, ru, zh (langDeModule, ...).

Details and examples for each plugin: Plugins.

Ecosystem

Connecting a server: Server integration.

AI-assisted development

• @qodalis/mcp-cli gives Claude Code (or any MCP client) the docs, the published API declarations and the plugin scaffolder, with no server needed:

  claude mcp add qcli -- npx -y @qodalis/mcp-cli
  

  Set QCLI_URL (and QCLI_TOKEN) to also expose a running server's commands, filesystem and data sources as MCP tools.

• llms.txt and llms-full.txt: the plugin API guide for language models.

See AI plugin development.

Development

This repository is a pnpm 12 + Nx 24 monorepo (Node 22):

pnpm install
pnpm run build                # all packages, in dependency order
pnpm exec nx test <project>   # Jasmine + Karma (ChromeHeadless), e.g. nx test guid
pnpm run lint
pnpm run serve:docs           # docs site on http://localhost:4300
pnpm run serve:angular-demo   # also serve:react-demo, serve:vue-demo, serve:vanilla-demo
pnpm run create-plugin -- --name <name> --description "<desc>" --processor-name <Name>

CONTRIBUTING.md covers branches and pull requests, DEVELOPER.md the architecture and build details.

License

MIT