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?
index.htmlactually 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
App.vueand 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.
src/main.jswe instantiate Vue on the
#q-appdiv 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.