@nathanfriend/vue-terminal

VUE-TERMINAL

Vue-terminal is a dependency-free, lightweight terminal emulator in Vue.js. Vue-terminal provide flexible api for developer to define task or command that can be executed by users.

Try the demo

How to use?

npm install @nathanfriend/vue-terminal

Example

// you can also load vue-terminal.min.js in script tag:
// <script src="/path/to/file/vue-terminal.min.js"></script>
<template>
	<vue-terminal :task-list="taskList" :command-list="commandList" style="width:50%;margin:0 auto"></vue-terminal>
</template>

<script>
  import VueTerminal from 'vue-terminal';
  export default {
    components: { VueTerminal },
    data () {
      return {
        taskList: {
            // your tasks
        },
        commandList: {
            // your commands
        }
      }
    }
  }
</script>

The content of taskList or commandList is:

    {
      commandOrTask:{
        description:'',
        messagesOrTask:[]//(function)
        }
    }

You can check /docs/plugins/commandList.js and /docs/plugins/taskList.js to view the detail of task and command.

Configuration options

The following options can be passed as props to the VueTerminal component to customize its behavior:

title (string): Sets the title that appears at the top of the terminal window, in the greeting, and in front of the prompt. Defaults to vTerminal.

showHeader (boolean): Indicates whether or not to render the window chrome on top of the terminal. Defaults to true.

greeting (string): Sets the greeting that will be shown to the user in the first line of the terminal. Pass false to not render a greeting. Defaults to Welcome to vTerminal..

showInitialCd (boolean): Initializes the terminal by showing an initial cd vTerminal command. Defaults to true.

prompt (string): The text to show before the prompt. Defaults to \vTerminal.

showHelpMessage (boolean): Indicates whether a help message should be shown. Defaults to true.

unknownCommandMessage (object): Allows the message that is printed when an unknown command is run to be customized. This object should have a message property and can optionally include some additional properties that change how this message is displayed:

{ time: '10:53', type: 'error', label: 'Error', message: 'That command is not recognized!' },

If not provided, the default message will be displayed:

Unknown Command.

type "help" to get a supporting command list.