According to the official website example, I originally loaded the method in created()
// html
<div id= " terminal " ></div>
// js
import {Terminal} from " xterm " ;
import " xterm/css/xterm.css " ;
export default {
created () { // Do not write in created, because you need to use dom
var term = new Terminal();
term.open(document.getElementById( ' terminal ' ));
term.write( ' Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ' )
term.onData((val) => {
term.write(val);
});
}
}
Error:
Error: Terminal requires a parent element.
at t.open (xterm.js ?ba0f: 1 )
at e.open (xterm.js ?ba0f: 1 )
The reason is also very simple, just change it to mounted(), because dom needs to be used, so you must wait for the dom structure to be ready before it can be initialized.