Terminal Emulator For Vue – vue-command

vue-command is a simple and customizable terminal emulator with support for autocomplete, asynchronous commands, search history, etc. Compatible with both Vue 3 and Vue 2.

It currently comes with 2 themes (light & dark) and you’re allowed to create your own themes as you see in the vue-command.css.

How to use it:

Install and import the vue-command.

import VueCommand from './VueCommand'
import 'vue-command/dist/vue-command.css'

Use the component.

<vue-command
  :commands="commands"
  show-help/>

Define your commands in an object containing key-value pairs as follows:

export default {
  components: {
    VueCommand
  },
  data: () => ({
    commands: {
      pokedex: ({ color, _ }) => {
        if (color && _[1] === 'pikachu') return 'yellow'
        return `Usage: pokedex pokemon [option]<br><br>
          Example: pokedex pikachu --color
        `
      },
      help: () => (`Usage: pokedex pokemon [option]<br><br>
        Example: pokedex pikachu --color
      `)
    }
  })
}

All possible props to customize the terminal emulator.

commands: {
  type: Object,
  required: true
},
helpTimeout: {
  type: Number,
  default: 4000
},
hideBar: {
  type: Boolean,
  default: false
},
hidePrompt: {
  type: Boolean,
  default: false
},
helpText: {
  type: String,
  default: 'Type help'
},
intro: {
  type: String,
  default: 'Fasten your seatbelts!'
},
keepPrompt: {
  type: Boolean,
  default: false
},
prompt: {
  type: String,
  default: '[email protected]:#'
},
showHelp: {
  type: Boolean,
  default: false
},
showIntro: {
  type: Boolean,
  default: false
},
title: {
  type: String,
  default: '[email protected]: ~'
},
whiteTheme: {
  type: Boolean,
  default: false
},
yargsOptions: {
  type: Object,
  default: () => ({})
}

Events.

• @input: Emits the current input
• @execute: Emits the whole executing command
• @executed: Emits after command execution

Preview:

Changelog:

v35.0.0 (05/26/2023)

• update

v34.0.0 (05/07/2023)

• bugfix

v33.0.1 (02/12/2023)

• bugfix

v32.3.0 (02/10/2023)

• update

v32.2.1 (01/11/2023)

• added vue 3 support
• bugfixes
• focus reverse i search

Download Details:

Author: ndabAP

Live Demo: https://ndabap.github.io/vue-command/

Download Link: https://github.com/ndabAP/vue-command/archive/master.zip

Official Website: https://github.com/ndabAP/vue-command

Install & Download:

# NPM
$ npm install vue-command --save