Skip to content
A terminal emulator in Vue.
JavaScript Vue
Branch: master
Clone or download
Latest commit 505fd6d Jun 17, 2019


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 vue-terminal


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

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

The content of taskList or commandList is:


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.
You can’t perform that action at this time.