[Solved] Pls help me understand the Quasar `App.vue` vs the `real root Vue`!

mesqueeb

So I understand that this is the root vue instance:

window.vm = new Vue({
    el: '#q-app',
    store,
    router,
    render: h => h(require('./App'))
  })
})

This is a vue component “pretending” to be the root:

<template>
  <!-- Don't drop "q-app" class -->
  <div id="q-app">
          <router-view></router-view>
  </div>
</template>
<script>
/*
 * Root component
 */
export default {
	data() {
		return {
			dataTest: "this is not the real ROOT data!!!! It's a fake root",
		}
	},
}
</script>

But what I don’t understand is that this “component” pretending to be a root can use the same id →　 <div id="q-app"> as the real root component…

How is this possible?

Because the index.html also includes this:

  <body>
    <div id="q-app"></div>
 </body>

s.molinari

See Razvan’s answer here: http://forum.quasar-framework.org/topic/447/clarification-on-default-template-correct-app-vue-layout

Scott

No More Posting New Topics!

[Solved] Pls help me understand the Quasar `App.vue` vs the `real root Vue`!