https://github.com/tzfun/vue-web-terminal
A feature-rich terminal emulator plugin applicable to Vue2 and Vue3.
https://github.com/tzfun/vue-web-terminal
command-line command-line-tool terminal vue vue-web-terminal vue3
Last synced: 6 months ago
JSON representation
A feature-rich terminal emulator plugin applicable to Vue2 and Vue3.
- Host: GitHub
- URL: https://github.com/tzfun/vue-web-terminal
- Owner: tzfun
- License: apache-2.0
- Created: 2022-02-15T07:36:28.000Z (almost 4 years ago)
- Default Branch: vue3
- Last Pushed: 2025-04-19T07:31:19.000Z (8 months ago)
- Last Synced: 2025-06-29T20:38:30.753Z (6 months ago)
- Topics: command-line, command-line-tool, terminal, vue, vue-web-terminal, vue3
- Language: Vue
- Homepage: https://tzfun.github.io/vue-web-terminal/
- Size: 11 MB
- Stars: 301
- Watchers: 1
- Forks: 39
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-web-terminal - 💻 A feature-rich and powerful web terminal plugin for vue2 & vue3.(功能强大的网页命令行终端插件) (Components & Libraries / UI Components)
- awesome-vue - vue-web-terminal - 💻 A feature-rich and powerful web terminal plugin for vue2 & vue3.(功能强大的网页命令行终端插件) (Components & Libraries / UI Components)
- fucking-awesome-vue - vue-web-terminal - 💻 A feature-rich and powerful web terminal plugin for vue2 & vue3.(功能强大的网页命令行终端插件) (Components & Libraries / UI Components)
README
[中文版](./README_ZH.md) | English
# vue-web-terminal
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
> 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 [](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
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
})
}
}
body, html, #app {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
```
# 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*
>
>  WeChat: *beifeng-tz*
# License
[Apache License 2.0](LICENSE)