中文版 | 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/

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 Highlight, Codemirror code highlighting
• 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, or try editing the code and previewing it on .

Document

Please go to Document

Quick Start

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.

#  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.js

import Terminal from 'vue-web-terminal'

// for vue2
Vue.use(Terminal)

// for vue3
const app = createApp(App).use(Terminal)

Example:

<template>
  <div id="app">
    <terminal name="my-terminal" @exec-cmd="onExecCmd"></terminal>
  </div>
</template>

<script>
  import Terminal from "vue-web-terminal"
  import 'vue-web-terminal/lib/theme/dark.css'

  export default {
    name: 'App',
    components: {Terminal},
    methods: {
      onExecCmd(key, command, success, failed) {
        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: '成功',
            content: command
          })
        }
      }
    }
  }
</script>

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

Contact Author

I am a backend coder who happens to have some knowledge of frontend. I developed this plugin out of personal interest.

If you have good ideas for code optimization or functions and are willing to contribute code, please submit PR, If you have any questions about the use of the plugin or find bugs, please submitissue.

Contact me (Add please note vue-web-terminal)

📮 Email: beifengtz@qq.com

WeChat: beifeng-tz

License

Apache License 2.0