# vue-web-terminal

**Repository Path**: tzfun/vue-web-terminal

## Basic Information

- **Project Name**: vue-web-terminal
- **Description**: 一个基于Vue制作的轻量且功能强大的网页Terminal插件。支持多种数据显示格式，支持Flash内容实时回显和用户输入，多个slot可自定义，提供Js Api。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: vue3
- **Homepage**: https://tzfun.github.io/vue-web-terminal/
- **GVP Project**: No

## Statistics

- **Stars**: 221
- **Forks**: 61
- **Created**: 2022-02-16
- **Last Updated**: 2025-10-28

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

[中文版](./README_ZH.md) | English

<div align=center>
<img src=shortcut/logo.png/>
</div>

# vue-web-terminal

<a href="https://github.com/tzfun/vue-web-terminal/tree/vue2"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue2"></a>
<a href="https://github.com/tzfun/vue-web-terminal/tree/vue3"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue3"></a>
<a href="https://www.npmjs.com/package/vue-web-terminal"><img src="https://shields.io/bundlephobia/minzip/vue-web-terminal"></a>
<a href="https://npmcharts.com/compare/vue-web-terminal?minimal=true"><img src="https://img.shields.io/npm/dt/vue-web-terminal.svg" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/vue-web-terminal"><img src="https://img.shields.io/npm/l/vue-web-terminal.svg" alt="Version"></a>

A web-side command line plugin built by `Vue`, supports multiple message formats such as tables, json, and codes, supports custom message styles, command line libraries, typing search prompts, etc., and simulates native terminal support ← → cursor toggle and ↑ ↓ history command toggle.

> :tada: The new document is now available. It's more detailed and more friendly, welcome to experience it: [https://tzfun.github.io/vue-web-terminal/](https://tzfun.github.io/vue-web-terminal/)

## Feature Support

* Supported message formats: plain text, table, json, code/multi-line text, html, ansi
* Supports real-time content display and appending, and can create simple animation effects
* Support user question and answer input
* Support online text editing
* Support window dragging and fixing
* Support ← → cursor key switching and ↑ ↓ key history command switching
* Support fullscreen
* Support command input prompts
* Support logging group folding
* Supports multiple styles of slots, customizable styles
* Supports themes, with built-in dark and light themes by default, and you can also customize themes
* Provides a rich set of JS APIs, almost all functions can be simulated by APIs to simulate non-human operations
* Supports Vue2/Vue3

![vue-web-terminal](shortcut/vue-web-terminal.gif)

> Short description:
>
> It does not have the ability to execute a specific command. This ability needs to be implemented by the developer.
> What it is responsible for is to get the command to be executed from the user in the form of an interface, and then
> hand it over to the developer to implement and execute. After that, hand it over to show it to the user

# Online Experience

You can learn about some of the features of this plugin through the [Online Experience](https://tzfun.github.io/vue-web-terminal/demo.html), or try editing the code and previewing it on [![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/silly-scooby-l8wk9b).

# Document

Please go to [Document](https://tzfun.github.io/vue-web-terminal/)

# Quick Start

> The **Vue2** version will be officially archived from **December 24, 2024** and will no longer provide maintenance updates.
> For the source code, see [vue2 branch](https://github.com/tzfun/vue-web-terminal/tree/vue2).

Install vue-web-terminal by npm. The `2.x.x` version corresponds to vue2, and the `3.x.x` version corresponds to vue3.
It is recommended to download the latest version corresponding to the main version.

```shell
#  install for vue2
npm install vue-web-terminal@2.xx --save

#  install for vue3
npm install vue-web-terminal@3.xx --save 
```

Use Terminal plugin in `main`

**Vue2**
```js
import Terminal from 'vue-web-terminal'

Vue.use(Terminal)
```

**Vue3**
```ts
import { createTerminal } from 'vue-web-terminal'

const app = createApp(App)

app.use(createTerminal())

app.mount('#app')
```

Example:

```vue
<script setup lang="ts">
  import {Terminal, SuccessFunc, FailedFunc} from "vue-web-terminal"

  const onExecCmd = (key: string, command: string, success: SuccessFunc, failed: FailedFunc) => {
    if (key === 'fail') {
      failed('Something wrong!!!')
    } else {
      let allClass = ['success', 'error', 'system', 'info', 'warning'];

      let clazz = allClass[Math.floor(Math.random() * allClass.length)];
      success({
        type: 'normal',
        class: clazz,
        tag: 'success',
        content: command
      })
    }
  }
</script>
<template>
  <div id="app">
    <terminal name="my-terminal" @exec-cmd="onExecCmd"></terminal>
  </div>
</template>

<style>
  body, html, #app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
</style>
```

# Contact Author

I am a backend coder, and I know a little bit about frontend. This plugin was created out of my interest.

If you have good ideas for code optimization or functions and are willing to contribute code, please submit [PR](https://github.com/tzfun/vue-web-terminal/pulls),
If you have any questions about the use of the plugin or find bugs, please submit[issue](https://github.com/tzfun/vue-web-terminal/issues).

> Contact me (Add please note vue-web-terminal)
>
> 📮 Email: *beifengtz@qq.com*
>
> ![](https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon16_wx_logo.png) WeChat: *beifeng-tz*

# License

[Apache License 2.0](LICENSE)