0.0.1 • Published 8 months ago
ttyd-vue3 v0.0.1
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"
/>
0.0.1
8 months ago