@zixinit/vue-terminal

Vue 3 terminal and code display component for admin consoles, deployment logs, command output, configuration previews, and structured JSON/code blocks.

This GitHub repository only contains the public npm package page and demo images. Source code and release workflow are maintained internally; business projects should consume the package from npm.

Install

pnpm add @zixinit/vue-terminal

Import the package style once in your app entry:

import "@zixinit/vue-terminal/style.css";

Features

• Command, args, cwd, and meta display.
• Copy button, copy feedback, empty state, and custom toolbar slot.
• Line numbers, fill-height mode, and optional auto-scroll for streamed output.
• Built-in formatting for nginx and JSON content.
• Syntax highlighting for common config, shell, web, SQL, diff, markdown, and log languages.
• JSON and code block folding.
• Terminal-style editable text area with v-model:content, Tab indentation, and undo/redo.
• Framework-neutral UI with no Element Plus dependency.

Demo

Nginx configuration formatting and folding

JSON formatting and folding

Usage

<template>
  <VueTerminal
    title="nginx.conf"
    language="nginx"
    format-code
    collapsible
    :content="content"
  />
</template>

<script setup lang="ts">
import VueTerminal from "@zixinit/vue-terminal";

const content = `
server {
listen 80;
server_name example.com;
location /api {
proxy_pass http://127.0.0.1:9100;
}
}
`;
</script>

Global registration is also available:

import { createApp } from "vue";
import { VueTerminalPlugin } from "@zixinit/vue-terminal";
import "@zixinit/vue-terminal/style.css";

createApp(App).use(VueTerminalPlugin).mount("#app");

Editable Content

Set editable to edit the original content while retaining the terminal appearance. Bind the value with v-model:content; the editor supports Tab indentation and native undo/redo shortcuts.

<template>
  <VueTerminal
    v-model:content="config"
    editable
    fill
    language="nginx"
    title="nginx.conf"
  />
</template>

For indentation-sensitive formats such as YAML or Python, use spaces instead of the default tab character:

<VueTerminal v-model:content="config" editable editor-tab-text="  " />

Streamed Output

The package only renders external content. It does not wrap SSE, WebSocket, or polling logic. Keep connection code in the business application and update the string passed to content.

<template>
  <VueTerminal language="log" auto-scroll :content="output" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const output = ref("");

function appendOutput(message: string) {
  if (output.value && !output.value.endsWith("\n")) output.value += "\n";
  output.value += message.endsWith("\n") ? message : `${message}\n`;
}
</script>

npm

Package name:

@zixinit/vue-terminal

Install the latest stable release:

pnpm add @zixinit/vue-terminal@latest