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.

Tips

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.

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

Vue3

import { createTerminal } from 'vue-web-terminal'

const app = createApp(App)

app.use(createTerminal())

app.mount('#app')

Vue2

import Terminal from 'vue-web-terminal'

Vue.use(Terminal)

Global Configuration

Tips

Global configuration needs to be processed before registering in main (before calling app.use()). This feature is only supported by Vue3 version (starting from 3.4.0).

Configure the local storage name

const terminal: VueWebTerminal = createTerminal()
//  default is 'terminal'
terminal.configStoreName('my-terminal-storage')

app.use(terminal)

Configure the maximum number of historical commands to be memorized per terminal instance

const terminal: VueWebTerminal = createTerminal()
//  default is 100
terminal.configMaxStoredCommandCountPerInstance(200)

app.use(terminal)

Configuring a custom theme

//  Export css file content
import customTheme from '/your-style-dir/terminal-custom-theme1.css?inline';

const terminal: VueWebTerminal = createTerminal()
terminal.configTheme('my-custom-theme', customTheme)

app.use(terminal)

Your first vue-web-terminal

<script setup lang="ts">
import {Terminal, DragConfig, FailedFunc, SuccessFunc, TerminalMessageClass} from 'vue-web-terminal';
import {reactive} from "vue";

const dragConf = reactive<DragConfig>({
  width: "50%",
  height: "70%",
  zIndex: 100,
  init: {
    x: 200,
    y: 200
  },
  pinned: false
})

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 as TerminalMessageClass,
      tag: clazz,
      content: `Your command is '${command}'`
    })
  }
}
</script>

<template>
  <terminal name="my-terminal"
            theme="dark"
            @exec-cmd="onExecCmd"
            :drag-conf="dragConf"
  />
</template>

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