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

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.

s.molinari

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

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?

s.molinari

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