Common Header and Footer Query

Developing with Prismic
1

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?

2

Hey Shawn,

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

Thanks.

4

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.

5

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.

6

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: