Tag Archives: Error: Terminal requires a parent element

[Solved] Xterm error: Error: Terminal requires a parent element.

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.