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

dsl101

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?

s.molinari

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

matt

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.

rstoenescu

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.

dsl101

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

s.molinari

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

Scott