Common Header and Footer Query

In a Nuxt/Slice Machine project, what is the recommended approach for creating a common header and footer across all my pages. I do not want to make it a slice because I don't want the content author to have to author header content for each page. Instead, perhaps create a single header document and point each page document to that using a content relationship field? With my limited experience in prismic, this seems like a good approach, but I'm not completely certain and I'm not exactly sure how to wire it up in the code. Would I have to manually query for it or is there a simpler way that is enabled by the slice machine project?

Hey Shawn,

We have a examples of how to do that on the Slicemachine website:


Thank you for this info, that is helpful, but my use case is a little different. I do not want a single header and footer throughout the entire site. I want the header and footer to be configured at the page level. The application I'm building will actually be a bunch of "micro-sites" housed in a single application/repo. The final product will be routes such as "/micro-site1/subpages" and "/micro-site2/subpages". Each micro-site (root) will have it's own header content. That is why my initial thought was to create a header document for each "site" and then just have those pages point to it's header using a content relationship field. Just not positive how I access that on the page response since currently that is happening automatically through slice machine.

I am pretty sure I found my answer in your documentation saying that I have to query the $prismic object to get anything outside of the slice area. I have it currently working with the psuedo-code below:

headerObject = getByUID('pageType', pageObject.headerUID).then((response) => {
    return getByUID('headerType', response.headerUID)

This works, but I'm not sure if it is the best approach or not. If there is better way, please let me know. Thanks.

Hey Shawn,

The way you discovered from this page is the best way. I would query the menu's on the component level and combine it with page layouts: