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
withinApp.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.
-
In
src/main.js
we instantiate Vue on the#q-app
div that is onindex.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