feat(nuxt): add setLayout utility

[HomWang]

🔗 Linked issue

❓ 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

📝 Checklist

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

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	33a7ad6
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/6308a5732c689600087574f4
😎 Deploy Preview	https://deploy-preview-6826--nuxt3-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[HomWang]

Add useLayout composables. can change layout
Within your pages, components, and plugins you can use useLayout to get access to data that resolves asynchronously.

Added document and composables

nuxt/nuxt#14658

[HomWang]

Extend it: https://v3.nuxtjs.org/guide/directory-structure/layouts/#overriding-a-layout-on-a-per-page-basis

[pi0]

Thanks for PR. I personally like it if renamed to setLayout. @danielroe What do you think about such utility?

[HomWang]

Thanks for PR. I personally like it if renamed to setLayout. @danielroe What do you think about such utility?

Currently, it can. Maybe it will have more missions in the future

[danielroe]

I agree, we don't want to have useLayout(layoutName: string) as the API. (If we used useLayout we would want it to return a ref to the layout, I think.)

setLayout does make sense, and I think preserves the opportunity to add more helpers if needed. We would need to document that this will work on the client, or (if on server) must be used within nuxt route middleware, and, moreover, persisted via a useState so that the client can ensure that the layout it renders is the same.

Possibly we could also implement this workflow - when !nuxtApp.isHydrating? - within this PR.

See https://github.com/nuxt/framework/issues/6824#issuecomment-1222604779.

[HomWang]

Yes. Named setLayout is consistent with nuxt2, someone may want to judge and set layout in middleware

[danielroe]

@516310460 FYI, I'll be looking at this shortly to see if it's possible to implement my comment above in this PR.

[HomWang]

@516310460 FYI, I'll be looking at this shortly to see if it's possible to implement my comment above in this PR.

Yes, I updated the source code to automatically trigger this PR

[danielroe]

Is there a reason you closed this?

[HomWang]

Is there a reason you closed this?

I need to submit first :)
Link: #6870

This PR, after waiting for development and testing to complete, I'm reopening

[danielroe]

Oh, I see. You can also use multiple branches in your fork for different PRs. (Might be easier.)

[HomWang]

Oh, I see. You can also use multiple branches in your fork for different PRs. (Might be easier.)

Thanks, I've never done this before, I'll try this in the future

[HomWang]

@danielroe Thanks you. source context

[danielroe]

My to-do list before merging:

• rename to setPageLayout to make it clearer how this composable operates (wdyt @pi0?)
• update more docs to refer to this composable
• fix behaviour in plugins to use router hook as well

[pi0]

Makes sense to call it setPageLayout and also improve plugin behavior. I think we can make _layout a permanent state as well using a pages module plugin instead of setState.

@516310460 Since this PR is made from your main branch I think we could move it to a Nuxt branch and continue updating it. Thanks for the idea and initial works ❤️

@danielroe Do you mind if I move forward with branch creation to merge and letting you opening new PR from branch once could?

[pi0]

@516310460 Also do you have a discord account? I would like to talk with you with daniel and helping on contribution process together.

[HomWang]

@516310460 Also do you have a discord account? I would like to talk with you with daniel and helping on contribution process together.

I have an account number

[pi0]

Perfect. Mind to send a DM to me? pi0#6582

[danielroe]

@pi0 Thanks, yes please!

[HomWang]

Perfect. Mind to send a DM to me? pi0#6582

Good Please wait a moment. I was having dinner

[HomWang]

@pi0 I have already DM you

[pi0]

~> nuxt/nuxt#14710