title: Issue with integrating node-pty and XtermJS with VueJS in Electron app
body: <p>I was trying to integrate <a href="https://github.com/microsoft/node-pty" rel="nofollow noreferrer">node-pty</a> and <a href="https://github.com/xtermjs/xterm.js" rel="nofollow noreferrer">xtermjs</a> in an Electron App. I'm using VueJS for the frontend and want to create a Terminal interface inside the app. So how do I structure my code so that I can use it as a component like this: </p>
  
  <p><code>&lt;Terminal&gt;&lt;/Terminal&gt;</code></p>
  
  <p>I have tried the following but not able to get it fully working.</p>
  
  <pre><code>// Terminal.vue component.
  
  &lt;template&gt;
    &lt;v-container fluid class="pa-1"&gt;
      &lt;div style="overflow-y:scroll!important" class="pa-1 black" id="terminal"&gt;&lt;/div&gt;
    &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import "xterm/css/xterm.css";
  import { Terminal } from "xterm";
  import { FitAddon } from "xterm-addon-fit";
  
  const os = require("os");
  const pty = require("node-pty");
  
  const shell = process.env[os.platform() === "win32" ? "COMSPEC" : "SHELL"];
  
  const ptyProc = pty.spawn(shell, [], {
    name: "xterm-color",
    env: process.env
  });
  
  const term = new Terminal({
    rows: 40,
    experimentalCharAtlas: "dynamic"
  });
  
  const fitAddon = new FitAddon();
  
  term.loadAddon(fitAddon);
  
  export default {
    data() {
      return {
        term: null
      };
    },
  
    mounted() {
      console.log("entered");
  
      term.open(document.getElementById("terminal"));
  
      fitAddon.fit();
  
      term.onData(data =&gt; ptyProc.write(data));
      ptyProc.on("data", function(data) {
        console.log(data);
        term.write(data);
      });
  
      term.onResize(size =&gt; {
        ptyProc.resize(
          Math.max(size ? size.cols : term.cols, 1),
          Math.max(size ? size.rows : term.rows, 1)
        );
      });
  
      console.log("exiting...");
    }
  };
  &lt;/script&gt;
  
  </code></pre>
  
  <p>With the above code I have achieved the following interface:</p>
  
  <p><a href="https://i.stack.imgur.com/e5Nrh.png" rel="nofollow noreferrer">Terminal interface</a> </p>
  
  <p>Here, a lot of features like terminal history, colors, some shorthand isn't working which were working fine with the vanilla javascript implementation below:  </p>
  
  <pre><code>const {Terminal} = require('xterm');
  const os = require('os');
  const pty = require('node-pty');
  const {FitAddon} = require('xterm-addon-fit');
  
  const shell = process.env[os.platform() === 'win32' ? 'COMSPEC' : 'SHELL'];
  
  const ptyProc = pty.spawn(shell, [], {
      name: 'xterm-color',
      env: process.env
  });
  
  const term = new Terminal({
      experimentalCharAtlas: 'dynamic',
      rows: 42
  });
  
  const fitAddon = new FitAddon();
  
  term.loadAddon(fitAddon);
  term.open(document.getElementById('opt1-panel'));
  fitAddon.fit();
  
  term.onData(data =&gt; ptyProc.write(data));
  ptyProc.on('data', function(data){
      term.write(data);
  });
  
  term.onResize(size =&gt; {
      ptyProc.resize(
          Math.max(size ? size.cols : term.cols, 1),
          Math.max(size ? size.rows : term.rows, 1)
      );
  });
  
  </code></pre>
  
  <p>The following image shows the result of above code which is a different project without vuejs.
  <a href="https://i.stack.imgur.com/xLOzW.png" rel="nofollow noreferrer">Using plain JS</a></p>
  
  <p>So how can I get it working in vuejs.</p>
  
  <p>Just started learning VueJS and web stuff, so please excuse if its something obvious.</p>