No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    4
    6
    2231
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dsl101 last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        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

        1 Reply Last reply Reply Quote 0
        • matt
          matt last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • rstoenescu
            rstoenescu Admin last edited by

            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.

            1 Reply Last reply Reply Quote 1
            • D
              dsl101 last edited by

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

              1 Reply Last reply Reply Quote 0
              • s.molinari
                s.molinari last edited by

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

                Scott

                1 Reply Last reply Reply Quote 1
                • First post
                  Last post