vue-command

A fully working Vue.js terminal emulator. See the demo.

Features

Parse arguments with yargs-parser
Search history (with ↑/↓)
White/Dark theme support
Autocomplete (with ↹)
Supports asynchronous commands

Installation

$ npm i vue-command --save

Properties

Property	Type	Default	Required	Description
`commands`	`Object`	`{}`	Yes	Key-value pairs where key is command and value is function with yargs arguments. Function should return either a `String` or a `Promise` that resolves to a `String`
`help-text`	`String`	`Type help`	No	Sets the placeholder
`help-timeout`	`Number`	`4000`	No	Sets the placeholder timeout
`hide-bar`	`Boolean`	`false`	No	Hides the bar
`hide-prompt`	`Boolean`	`false`	No	Hides the prompt
`intro`	`String`	`Fasten your seatbelts!`	No	Sets the intro
`prompt`	`String`	`~neil@moon:#`	No	Sets the prompt
`show-help`	`Boolean`	`false`	No	Shows the placeholder
`show-intro`	`Boolean`	`false`	No	Shows the intro
`title`	`String`	`neil@moon: ~`	No	Sets the title
`white-theme`	`Boolean`	`false`	No	Enables the white theme
`yargs-options`	`Object`	`{}`	No	Sets the yargs options

Usage

<template>
  <vue-command
    :yargs-options="{ alias: { color: ['colour'] } }"
    :commands="commands"
  />
</template>

<script>
import VueCommand from 'vue-command'
import 'vue-command/dist/vue-command.css'

export default {
  components: {
    VueCommand
  },

  data: () => ({
    commands: {
      // yargs arguments
      pokedex: ({ color, _ }) => {
        if (color && _[1] === 'pikachu') return 'yellow'

        return `Usage: pokedex pokemon [option]<br><br>

        Example: pokedex pikachu --color
        `
      }
    }
  })
}
</script>

<style lang="scss">
  .vue-command {
    .term {
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
    }

    .term-std {
      min-height: 300px;
      max-height: 300px;
      overflow-y: scroll;
    }
  }
</style>