Terminal Emulator For Vue – vue-command

Description:

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

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

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

Last Update: September 10, 2019

Install:

# NPM
$ npm install vue-command --save

You Might Be Interested In:

Tags:

Add Comment