Documentation is unclear

[peterclemenko]

I'm trying to use this to implement in an app and it's not clear how to use this in an app. An example would be useful.

[PrinceOwen9466]

I think your best chance is to read his code and adapt it to your needs. It's quite a small framework s

It is designed to simply output new strings added to it's prop array. Maybe I'll create a wrapper when I have time. For now, I hope this helps someone.

<template>
  <div class="xterm"/>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Watch } from "vue-property-decorator";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";

import "xterm/css/xterm.css";

@Component({
  props: {
	buffer: Array,
	background: String,
	foreground: String
  }
})
export default class VueTerminal extends Vue {
  $term = {} as Terminal;
  $stream: string[] = [];
  fitAddon = {} as FitAddon;

  initialize() {
	this.$term = new Terminal({
	  theme: {
		background: this.$props.background ? this.$props.background : "#000000",
		foreground: this.$props.foreground ? this.$props.foreground : "#ffffff"
	  }
	});
	this.$term.open(this.$el as HTMLElement);
	this.$term.loadAddon((this.fitAddon = new FitAddon()));

	this.fitAddon.fit();
	this.onBuffer(this.$stream);
  }

  @Watch("buffer", { deep: true, immediate: true })
  onBuffer(buffer: string[]) {
	if (this.$stream) {
	  for (const s of buffer.filter(d => !this.$stream.includes(d))) {
		if (s) {
		  this.$term.writeln(s);
		  this.$stream.push(s);
		}
	  }
	}
  }

  mounted() {
	this.$stream = [];
	this.initialize();
  }
}
</script>

<style lang="scss" scoped>
.xterm {
  width: 100%;
  height: 100%;
}
</style>

Prince.