Clarification on default template / correct 'App.vue' layout

  • At the top of the default template App.vue, I see this:

      <!-- Don't drop "q-app" class -->
      <div id="q-app">

    First of all, there’s a mismatch between the comment and the code - should this be an id or a class?

    Secondly, index.html actually contains the div with that id:

      <div id="q-app"></div>
      <!-- built files will be auto injected -->

    So is that ending up with 2 divs with the same id? Or have I misunderstood what’s going on there?

  • It seems you can remove the id=q-app within App.vue and everything works fine for the dev server. I am sure there is a reason for it though. @rstoenescu could probably shed light on it.


  • From what I can see, it appears to be used to allow you to create a splash screen while Vue / Quasar is loading. By keeping the class on the App.vue, there is no change in the outer div when Vue / Quasar finally loads in, so you could listen for a load event and smoothly transition to the regular app layout rather than have a hard transition when the div changes.

  • Admin

    In src/main.js we instantiate Vue on the #q-app div that is on index.html. This replaces it with your App.vue component, which in turn must maintain the id attribute so that some components will have a reference to work with. So it’s needed in both places.

  • Thanks - that all makes sense, apart from the word ‘class’ in the comment - is that just a typo?

  • Yeah, I’d say it’s a typo.


Log in to reply