ttyd-vue3

ttyd-vue

This is the frontend component of the ttyd project but rewritten in Vue.js. I built it because I was working on a project that required a web-based terminal emulator and I wanted to use ttyd but the project I was working on was written in Nuxt and I needed to use ttyd as a component in the project not as an IFrame or a separate page. So I decided to rewrite it in Vue.js.

Installation

npm/yarn/pnpm/bun install ttyd-vue

Usage

import Terminal from 'ttyd-vue'

export default {
  name: 'App',
  components: {
    Terminal
  },
  data() {
    return {
      clientOptions: {
        rendererType: 'webgl',
        disableLeaveAlert: false,
        disableResizeOverlay: false,
        enableZmodem: false,
        enableTrzsz: false,
        enableSixel: false,
        isWindows: false,
        unicodeVersion: '11'
      },
      termOptions: {
        fontSize: 13,
        fontFamily: 'Consolas,Liberation Mono,Menlo,Courier,monospace',
        theme: {
          foreground: '#d2d2d2',
          background: '#2b2b2b',
          cursor: '#adadad',
          black: '#000000',
          red: '#d81e00',
          green: '#5ea702',
          yellow: '#cfae00',
          blue: '#427ab3',
          magenta: '#89658e',
          cyan: '#00a7aa',
          white: '#dbded8',
          brightBlack: '#686a66',
          brightRed: '#f54235',
          brightGreen: '#99e343',
          brightYellow: '#fdeb61',
          brightBlue: '#84b0d8',
          brightMagenta: '#bc94b7',
          brightCyan: '#37e6e8',
          brightWhite: '#f1f1f0'
        },
        allowProposedApi: true
      },
      flowControl: {
        limit: 100000,
        highWater: 10,
        lowWater: 4
      }
    }
  }
}

   <Terminal
      wsUrl="ws://localhost:8000"
      :clientOptions="clientOptions"
      :termOptions="termOptions"
      :flowControl="flowControl"
    />