Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

feat(nuxt): add setPageLayout utility (#6826) #7075

Merged
merged 4 commits into from
Aug 31, 2022
Merged

Conversation

danielroe
Copy link
Member

πŸ”— Linked issue

resolves nuxt/nuxt#14710

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

This adds a setPageLayout utility to handle complexities associated with changing layout keyed off of route.meta. Namely, it's complicated to persist the change from server -> client. This persists the server-set layout via a custom useState which is only used on the initial hydration. Subsequent layout changes are reactive and don't need to be hydrated.

Originally implemented by @516310460 ❀️

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@danielroe danielroe added enhancement New feature or request pages 🍰 p2-nice-to-have Priority 2: nothing is broken but it's worth addressing labels Aug 30, 2022
@danielroe danielroe requested a review from pi0 August 30, 2022 16:04
@danielroe danielroe self-assigned this Aug 30, 2022
@netlify
Copy link

netlify bot commented Aug 30, 2022

βœ… Deploy Preview for nuxt3-docs ready!

Name Link
πŸ”¨ Latest commit 9861f36
πŸ” Latest deploy log https://app.netlify.com/sites/nuxt3-docs/deploys/630e4b3cf9c6ab0007e62e55
😎 Deploy Preview https://deploy-preview-7075--nuxt3-docs.netlify.app
πŸ“± Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@pi0
Copy link
Member

pi0 commented Aug 30, 2022

Following up nuxt/nuxt#14710, i understand there is a way to use prop binding for global usage of NuxtLayout but I'm thinking we could easily (what I suppose) use _layout state for default value of :name for <NuxtLayout>. This way utility can be already universal as setLayout.

@danielroe
Copy link
Member Author

I did consider updating the default value but feel that it's not optimal. Consider this use case:

  1. user visits a blog page (~/pages/blog/[slug].vue). This blog entry is full-width, so we set the layout to full-width using setPageLayout (so that it can be hydrated correctly on client-side).
  2. user changes route to ~/pages/index.vue or ~/pages/about.vue. Now these are also displaying full-width layout unless there is a hard-coded definePageMeta({ layout: 'default }) in the page.

If we want to update the default layout (and I'm not sure we should) then a setDefaultLayout utility or similar might be a better approach.

@HomWang
Copy link
Contributor

HomWang commented Aug 30, 2022

I would like to know if there is a possibility of having more than one NuxtLayout in the page and if changing the _layout will be affected

<template>
  <div>
    <NuxtLayout>
      <template #header> Some header template content. default</template>
    </NuxtLayout>
    <NuxtLayout name="custom">
      <template #header> Some header template content. custom</template>
    </NuxtLayout>
    <NuxtLayout name="custom-two">
      <template #header> Some header template content. custom-two</template>
    </NuxtLayout>
  </div>
</template>

Link: https://stackblitz.com/edit/github-m7s6nu?file=pages%2Findex.vue

@pi0 pi0 changed the title feat(nuxt): add setLayout utility (#6826) feat(nuxt): add setPageLayout utility (#6826) Aug 31, 2022
@pi0 pi0 changed the title feat(nuxt): add setPageLayout utility (#6826) feat(nuxt): add setPageLayout utility (#6826) Aug 31, 2022
@pi0
Copy link
Member

pi0 commented Aug 31, 2022

Makes sense to introduce setDefaultLayout utility for universal usage πŸ‘πŸΌ

@pi0 pi0 merged commit b90d286 into main Aug 31, 2022
@pi0 pi0 deleted the feat/set-page-layout branch August 31, 2022 08:02
@pi0 pi0 mentioned this pull request Sep 1, 2022
@danielroe danielroe added the 3.x label Jan 19, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
3.x enhancement New feature or request 🍰 p2-nice-to-have Priority 2: nothing is broken but it's worth addressing pages
Projects
None yet
Development

Successfully merging this pull request may close these issues.

setLayout/setPageLayout utility
4 participants