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



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

    <template>
      <!-- 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:

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

    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.

    Scott



  • 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.

    Scott


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.