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

    What is the best way to implement partials and layout in Quasar?

    Help
    2
    4
    265
    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.
    • B
      BabaYaga last edited by BabaYaga

      I started a project using Express and Handlebars and then was encouraged to look at Vue.js and Quasar. I am still at the stage of reading the docs but so far can’t understand how to have layouts, partials and sections in Quasar. I think a partial would be a component, but I’m lost how to have a layout with partials and sections that I can inject content into.

      This is what I do using npm express-handlebars in a file called baselayout.hbs:

      <!doctype html>
          <html lang="en">
          <head>
              {{> global/headcode }} <!-- partial view with code for the head tag. it has stuff like favicon links --->
              {{{_sections.pagemeta}}} <!-- page specific metadata injected here. this would be meta keywords description etc for a page/view --->
          </head>
          <body>
          <div>
              {{> global/siteheader }} <!--- partial view for the site's header --->
          
              <div id="base-Container">
                  <main id="base-Content" role="main">
                      {{{ body }}} <!--- a page's main body content goes here --->
                  </main>
              </div>
          </div>
          {{> sitefooter }} 
          {{{_sections.pagescripts}}} <!-- section for page-specific scripts injected here --->
          </body>
          </html>
      

      How could I setup something like the above in Quasar that would also work with server-side rendering? I just need a base layout with header/footer components included but also sections into which page-specific content can go.

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

        What’s unclear to you about QLayout and QPaqe? This starts with what you are looking for.

        https://quasar.dev/layout/page

        You don’t need to use Quasar’s QLayout though. You can use your own. You only need to put QPage inside a QPageContainer for it to work.

        Scott

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

          @s-molinari I don’t understand how to have sections to inject content into which are not header/footer or page content. I understand that a Qpage is the {{{ body }}} part in my example, and I understand you can have a header/footer, but where/how do I insert sections like {{{_sections.pagemeta}}} at the top?

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

            You build the sections (the components) yourself. It’s not hard. Meta can be done via the meta plugin.

            https://quasar.dev/quasar-plugins/meta

            Scott

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