Vue + Rollup + Atom.io


#1

Ok so I am using rollup to bundle compiled *.vue view files. This is going great, I have it set up to compile my *.vue files and it is. I am having trouble mounting one on the element created by Atom.io though.

this.element = document.createElement('div');
this.element.id = "apps";

this.vue = new Vue({
  el: "#apps",
  render: h => h(backgroundEditor)
});

Every single time I get that it can not find the element “#apps” when testing the package in Atom dev mode. I am assuming this is because the element hasn’t been added to the DOM yet? Is there an event I can subscribe to that would be a good place to create the vue? How else can I solve this problem?


#2

Looks like you’re right :joy:. You didn’t add the element to the DOM. You could do document.body.appendChild(this.element); before create the Vue instance.


#3

Hey, actually I found a better solution to my own problem. So the way the registered openers work is they expect you to return an HTMLElement or something that extends/inherits one (see Atom docs). You can either do that and then append your created element to the this reference or you can just create two elements on the document, one nested inside the other. Then attach the vue instance to the nested element, and it’s ok if it hasn’t been added yet, you can pass the element directly to “el” such as “el: this.childElement” (see Vue docs).

This is what I am actually doing right now to register my Vue instances. I am also using rollup to bundle my *.vue files and their related css.

this.subscriptions.add(atom.workspace.addOpener( (uri) => {
  var editor;
  if (uri.endsWith('.background.gmx')) editor = new BackgroundEditor(uri);

  var linkElement = document.createElement('link');
  linkElement.rel = "stylesheet";
  linkElement.type = "text/css";
  linkElement.href = __dirname + "/components_compiled/background-editor.css";
  editor.element.appendChild(linkElement);
  editor.vue = new Vue({
    el: editor.celement,
    render: h => h(backgroundEditor)
  });

  return editor;
}));

My custom editor for my little project creates the two elements and nests the child one.

constructor(uri, serializedState) {
  this.uri = uri;

  this.element = document.createElement('div');
  this.element.appendChild(this.celement = document.createElement('div'));
  this.celement.id = this.getTitle();
}

And then it returns the outer element for the getElement() member function.

getElement() {
  return this.element;
}