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