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

fix(nuxt): import and wrap client-only components once - #7245

Merged
pi0 merged 3 commits into
mainfrom
feat/client-only-wrapper
Sep 6, 2022
Merged

fix(nuxt): import and wrap client-only components once#7245
pi0 merged 3 commits into
mainfrom
feat/client-only-wrapper

Conversation

@antfu

@antfu antfu commented Sep 5, 2022

Copy link
Copy Markdown
Member

🔗 Linked issue

fix nuxt/nuxt#14799

❓ 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

Previously createClientOnly was called inside the render function, which unexpectedly created new components on each render.

Before:
Screen Shot 2022-09-05 at 20 30 12

After:
Screen Shot 2022-09-05 at 20 48 00

📝 Checklist

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

@netlify

netlify Bot commented Sep 5, 2022

Copy link
Copy Markdown

Deploy Preview for nuxt3-docs ready!

Name Link
🔨 Latest commit 1c64244
🔍 Latest deploy log https://app.netlify.com/sites/nuxt3-docs/deploys/63160ab302cdbc0008abb3c8
😎 Deploy Preview https://deploy-preview-7245--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.

Comment thread packages/nuxt/src/app/components/client-only.mjs
@antfu
antfu requested a review from danielroe September 5, 2022 13:00
Comment thread packages/nuxt/src/components/loader.ts Outdated

@danielroe danielroe left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me. 👍 Thanks @antfu. ❤️

@pi0 pi0 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice changes 💯

@pi0 pi0 changed the title fix(nuxt): wrapper ClientOnly only on import fix(nuxt): import and wrap client-only components once Sep 6, 2022
@pi0
pi0 merged commit 96b5b8f into main Sep 6, 2022
@pi0
pi0 deleted the feat/client-only-wrapper branch September 6, 2022 07:40
@pi0 pi0 mentioned this pull request Sep 9, 2022
@pi0 pi0 mentioned this pull request Sep 15, 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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Client only components (x.client.vue) force remount on prop change

3 participants