Examples

1. Default
2. Simple
3. Complex

1. Default

Codepen for this example: vue-static-terminal - example 1 (default)

<static-terminal></static-terminal>

export default {}

2. Simple

Codepen for this example: vue-static-terminal - example 2 (simple)

<static-terminal :header="terminal.header"
                 :prompt="terminal.prompt"
                 :commands="terminal.commands"></static-terminal>

export default {
  data: () => {
    return {
      terminal: {
        header: {
          text: 'some Terminal',
          toolbar: '✕'
        },
        prompt: '/>',
        commands: [
          {command: 'ls', result: 'file1 file2'},
          {command: 'whoami', result: 'root'}
        ]
      }
    }
  }
}

3. Complex

Codepen for this example: vue-static-terminal - example 3 (complex)

<static-terminal :header="terminal.header"
                 :prompt="terminal.prompt"
                 :commands="terminal.commands"></static-terminal>

export default {
  data: () => {
    return {
      terminal: {
        header: {
          text: "xterm",
          toolbar: "━  ✖"
        },
        prompt:
          '<svg width="15" height="10" style="fill: #fff"><rect width="10" height="10"></rect><polygon points="10 0, 10 10, 15 5"></polygon></svg>',
        commands: [
          {command: 'whoami', result: 'root'},
          {command: 'uname -r', result: '4.15.1-2-ARCH'},
          {
            command: 'ls -a',
            result: '<strong>.</strong>&nbsp;&nbsp;<strong>..</strong>&nbsp;&nbsp;README.MD&nbsp;&nbsp;.gitignore&nbsp;&nbsp;<strong>src</strong>'
          },
          {command: 'asdf', result: 'command not found: asdf'},
          {prompt: '<svg width="15" height="10" style="fill: #fff"><rect width="10" height="10"></rect><polygon points="10 0, 10 10, 15 5"></polygon><line x1="2" y1="2" x2="8" y2="8" style="stroke:#f00; stroke-width:2"></line><line x1="2" y1="8" x2="8" y2="2" style="stroke:#f00; stroke-width:2"></line></svg>'}
        ]
      }
    }
  }
}