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



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



Log in to reply
 

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