Quick Start

You can experience some of the sample functions written by the author in Online Experience, you can also edit the code and run in CodeSandbox.

Before you plan to officially use this plugin, I hope you have read About the plugin and fully understand the functions supported by this plugin and its limitations.

Install

You need to understand the plugin version number rules：

  • 2.x.x corresponds to Vue2 version
  • 3.x.x corresponds to Vue3 version

It is recommended to go to releases to find the latest version of the corresponding vue version.

npm
# for vue2
npm install vue-web-terminal@2

# for vue3
npm install vue-web-terminal@3

Register

Register the plugin in main.js

Vue2
import Terminal from 'vue-web-terminal'
//  This style needs to be introduced in versions 3.2.0 and 2.1.13 later, and no theme style is needed in previous versions
//  Light theme: vue-web-terminal/lib/theme/light.css
import 'vue-web-terminal/lib/theme/dark.css'

Vue.use(Terminal)

Your first vue-web-terminal

<template>
  <terminal name="my-terminal"
            @exec-cmd="onExecCmd"
            :drag-conf="dragConf" />
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      dragConf: {
        width: "50%",
        height: "70%",
        zIndex: 100,
        init: {
          x: 200,
          y: 200
        },
        pinned: false
      }
    }
  },
  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: clazz,
          content: `Your command is '${command}'`
        })
      }
    }
  }
}
</script>
<style scoped>
</style>

After starting your project, if a draggable terminal window appears on the page, congratulations on your first terminal application!

You can enter any command in the window and press Enter, and different levels of content will be randomly prompted.