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

yarn

# for vue2
yarn add vue-web-terminal@2

# for vue3
yarn add vue-web-terminal@3

pnpm

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

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

Register

Register the plugin in main.js

Vue2

import Terminal from 'vue-web-terminal'

Vue.use(Terminal)

Vue3

import Terminal from 'vue-web-terminal'

createApp(App).use(Terminal)

Your first vue-web-terminal

<template>
  <terminal name="my-terminal"
            @exec-cmd="onExecCmd"
            :drag-conf="dragConf"
            theme="dark" />
</template>
<script>
import Terminal from 'vue-web-terminal';

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.