0

I am developing a simple web app with Meteor and Vue and I came across this problem. Cannot find element: #app. I have searched and searched, added some 'solutions' to my problem but still no result.

missionPage.vue

<template>
  <div class="ui center aligned container ">
    <div class="missionPage">
      <h3 class="ui header">Our story</h3>
      <p>{{text1}}</p>
      <p>{{text2}}</p>
      <h1>Trigger question?</h1>
      <a href="#" type="button" id="scrollDownArrow"><i class="huge angle double 
down icon" ></i></a>
    </div>
  </div>
</template>

<script>
import { Session } from 'meteor/session';

export default {
  data() {
    return {
      text1:'abc',
      text2:'def'
    }
  },
}
</script>

missionPage.html

<template name='missionPage'>
  <div id="app">
  </div>
</template>

missionPage.js

import { Template } from 'meteor/templating';
import { Session } from 'meteor/session';
import { Vue } from 'meteor/akryum:vue';
import missionPage from '/client/template/missionPage.vue';

window.onload=function(){
  var app = new Vue({
    el: '#app',
    render:h=>h(missionPage)
  })
}

It seems that it doesn't recognize the #app id which is mind-blowing in my opinion. I have exactly the same code ran in another app and it works perfectly. I have red other posts and added the 'window.onload' function as it turns out that the reason why the element is not recognized is that it was not loaded but still the error persists.

Byscripts
  • 2,578
  • 2
  • 18
  • 25
Roberto Chirila
  • 125
  • 1
  • 10
  • @RoyJ Well isn't that what I did? #app indicated where my 'missionPage.vue' will be rendered and this is in the '#app' div. Render missionPage.vue in the div with id app. Maybe I don't get it. That is all my source code. – Roberto Chirila Jun 28 '17 at 12:48
  • @RoyJ How am I supposed to get rid of the template tags from the missionPage.html? I use this page as part of a website to which I need to route. I have set up a router that routes to the missionPage template so deleting it will cause the page to not load. – Roberto Chirila Jun 28 '17 at 13:23
  • In your onload function, before calling Vue, `console.log(document.body.innerHTML)` and see if it includes the `#app` div. – Roy J Jun 28 '17 at 13:41
  • @RoyJ I did something like: document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); before calling the vue and it displays that everything is loaded. – Roberto Chirila Jun 28 '17 at 13:49
  • That doesn't mean that `#app` is there when you're calling Vue, which is what you want to know. – Roy J Jun 28 '17 at 14:17
  • @RoyJ I have copied all my three files to another project and when I console.log my inner html I can see the #app div. I cannot see it though in my actual project even though the files are identical...This doesn't make sense. – Roberto Chirila Jun 28 '17 at 14:28
  • Sounds like a timing issue. Experiment with wrapping the Vue call in a `setTimeout` or possibly use [Meteor.defer](https://stackoverflow.com/a/10119993/392102) – Roy J Jun 28 '17 at 14:43
  • @RoyJ I have implemented Meteor.defer and now I manage to load and find my #app component but now I receive this error : [Vue warn]: Failed to mount component: template or render function not defined. It points to the line on which I am creating the vue. 'var app = new Vue({' I appreciate a lot the help that you have given to me. – Roberto Chirila Jun 28 '17 at 15:11
  • Try using a `function` declaration rather than an arrow function for your `render` – Roy J Jun 28 '17 at 15:19

0 Answers0