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



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



  • 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



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



  • 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


Log in to reply