xterm-vue/XtermVue.vue

<template>
    <div class="xterm" />
</template>
<script>
import 'xterm/dist/xterm.css'
import { Terminal } from 'xterm'
import * as fit from 'xterm/lib/addons/fit/fit'

Terminal.applyAddon(fit)

export default {
    mounted() {
        this.$term = new Terminal({})
        this.$term.open(this.$el)
        this.$term.fit()
        this.$term.on('blur', () => this.$emit('blur'))
        this.$term.on('focus', () => this.$emit('focus'))
        this.$term.on('title', title => this.$emit('title-change', title))
    },
    
    beforeDestroy () {
        this.$term.destroy()
    },

    methods: {
        fit() {
            this.$term.fit()
        },
        focus() {
            this.$term.focus()
        },
        blur() {
            this.$term.blur()
        },
        paste(data){
            this.$term.paste(data)
        }
    }
}
</script>