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">
            {{> 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 --->
            {{> 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 --->
        {{> sitefooter }} 
        {{{_sections.pagescripts}}} <!-- section for page-specific scripts injected here --->

    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.


    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.


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



Log in to reply