feat(nuxt): client only page #25037

logotip4ik · 2024-01-03T20:13:34Z

🔗 Linked issue

#24866

❓ Type of change

📖 Documentation (updates to the documentation, readme or JSdoc annotations)
🐞 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)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

resolves #24866

📝 Checklist

I have linked an issue or discussion.
I have added tests (if possible).
I have updated the documentation accordingly.

bolt-new-by-stackblitz · 2024-01-03T20:13:38Z

Run & review this pull request in StackBlitz Codeflow.

nuxt-studio · 2024-01-03T20:13:38Z

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Nuxt Docs	Edit on Studio ↗︎	View Live Preview	`821a9c8`

docs/2.guide/2.directory-structure/1.pages.md

packages/nuxt/src/pages/runtime/composables.ts

packages/nuxt/src/pages/runtime/page.ts

danielroe

Whoa - thank you! ❤️

I wonder if we can implement this at build-time to avoid even including these pages in the server bundle (at the moment, they will be).

So, when we scan pages here:

nuxt/packages/nuxt/src/pages/utils.ts

Line 340 in e084ee7

route.component = genDynamicImport(file, { interopDefault: true })

we could instead use a virtual file that is handled by a build plugin. That build plugin would generate code that wraps the pages with createClientOnly.

I'm suggesting this because I think it will pair better with the implementation of server pages, which can be done in the same way (cc: @huang-julien)

Co-authored-by: Alexander Lichter <[email protected]>

This reverts commit 44e0750.

logotip4ik · 2024-01-04T16:43:55Z

@danielroe Implemented something like what you said. But it has one issue, when wrapped in Transition it will log that: "component inside Transition is rendering non root component". That's why later i moved _wrapIf from user page component to transition.

wdyt about build file that reexports ClientOnly component or plain function and moving _wrapIf back to Transition ?

danielroe · 2024-01-18T15:44:45Z

I think that would probably be a good solution 👌

This reverts commit 16e2761.

…ly-page

it would not be possible without Julien Huang

packages/nuxt/src/components/runtime/client-component.ts

logotip4ik added 4 commits January 3, 2024 21:29

refactor: allow wraping route component into ClientOnly

0b653bc

test: add tests for client only page

e3d63de

chore: add clientOnly option to PageMeta interface

a0e28b9

docs: mention clientOnly in definePageMeta

821a9c8

github-actions bot added the 3.x label Jan 3, 2024

logotip4ik marked this pull request as draft January 3, 2024 20:29

logotip4ik added 2 commits January 4, 2024 00:15

fix ? wrap transition into client only

44e0750

test: type errors array and push only error text

2a62ce0

logotip4ik marked this pull request as ready for review January 3, 2024 22:31

TheAlexLichter requested a review from danielroe January 4, 2024 08:32

TheAlexLichter reviewed Jan 4, 2024

View reviewed changes

docs/2.guide/2.directory-structure/1.pages.md Outdated Show resolved Hide resolved

TheAlexLichter reviewed Jan 4, 2024

View reviewed changes

packages/nuxt/src/pages/runtime/composables.ts Outdated Show resolved Hide resolved

TheAlexLichter reviewed Jan 4, 2024

View reviewed changes

packages/nuxt/src/pages/runtime/page.ts Outdated Show resolved Hide resolved

huang-julien self-requested a review January 4, 2024 09:14

danielroe requested changes Jan 4, 2024

View reviewed changes

logotip4ik and others added 4 commits January 4, 2024 13:06

Update docs/2.guide/2.directory-structure/1.pages.md

4a568f8

Co-authored-by: Alexander Lichter <[email protected]>

Update packages/nuxt/src/pages/runtime/composables.ts

6f69fbc

Co-authored-by: Alexander Lichter <[email protected]>

Revert "fix ? wrap transition into client only"

16e2761

This reverts commit 44e0750.

wip rexport page component wrapped in createClientOnly

39eb07f

logotip4ik marked this pull request as draft January 4, 2024 16:34

danielroe added the enhancement label Jan 5, 2024

danielroe force-pushed the main branch from f78140e to 4168157 Compare January 9, 2024 09:39

logotip4ik requested a review from danielroe January 9, 2024 20:17

logotip4ik added 2 commits January 14, 2024 13:24

Merge branch 'main' into feat/client-only-page

7221021

Merge branch 'main' into feat/client-only-page

d4c58fa

Reapply "fix ? wrap transition into client only"

b15125a

This reverts commit 16e2761.

logotip4ik added 2 commits February 3, 2024 21:57

chore: even less diff

c610822

chore: allow all page modes beeing the query value

4fadacf

huang-julien mentioned this pull request Feb 20, 2024

feat(nuxt): server-only pages #24954

Merged

11 tasks

logotip4ik added 11 commits February 21, 2024 22:03

Merge branch 'main' into feat/client-only-page

d1417f5

Merge branch 'main' of github.com:logotip4ik/nuxt into feat/client-on…

e831dca

…ly-page

fix: finally it works

f778228

it would not be possible without Julien Huang

chore: remove not used plugin

087e038

chore: cleanup type

a3e7ef2

chore: cleanup imports

3834257

chore: better description wording

68feb8b

chore: run lint

3cefe8f

chore: add no side effects to createClientPage

5738bfe

docs: add client only section in pages

8e6ecd8

docs: cleanup meta section

da85070

logotip4ik marked this pull request as ready for review March 1, 2024 21:09

logotip4ik requested review from danielroe, huang-julien and TheAlexLichter March 1, 2024 21:09

huang-julien reviewed Mar 2, 2024

View reviewed changes

packages/nuxt/src/components/runtime/client-component.ts Outdated Show resolved Hide resolved

logotip4ik and others added 6 commits March 2, 2024 17:03

fix: allow passing down page props

899ff0f

chore: revert server replacement control flow changes

6d240ce

chore: use else-if to prevent double check

6f2620a

Merge remote-tracking branch 'origin/main' into feat/client-only-page

1a28d8d

style: lint

86de839

docs: add additional line

66fa33f

danielroe approved these changes Mar 6, 2024

View reviewed changes

danielroe merged commit 230f6b4 into nuxt:main Mar 6, 2024

github-actions bot mentioned this pull request Mar 6, 2024

v3.11.0 #25964

Merged

kakkokari-gtyih mentioned this pull request Mar 18, 2024

共有ボタンから共有する際に適切な内容ではないページが生成される misskey-dev/misskey-hub-next#125

Closed

1 task

BalaKadiyala mentioned this pull request Jun 22, 2024

[Snyk] Upgrade nuxt from 3.7.0 to 3.11.2 BalaKadiyala/snyk-chat-goof#7

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(nuxt): client only page #25037

feat(nuxt): client only page #25037

Uh oh!

logotip4ik commented Jan 3, 2024 •

edited

Loading

Uh oh!

bolt-new-by-stackblitz bot commented Jan 3, 2024

Uh oh!

nuxt-studio bot commented Jan 3, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danielroe left a comment

Uh oh!

logotip4ik commented Jan 4, 2024 •

edited

Loading

Uh oh!

danielroe commented Jan 18, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat(nuxt): client only page #25037

feat(nuxt): client only page #25037

Uh oh!

Conversation

logotip4ik commented Jan 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

bolt-new-by-stackblitz bot commented Jan 3, 2024

Uh oh!

nuxt-studio bot commented Jan 3, 2024

✅ Live Preview ready!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danielroe left a comment

Choose a reason for hiding this comment

Uh oh!

logotip4ik commented Jan 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

danielroe commented Jan 18, 2024

Uh oh!

Uh oh!

Uh oh!

logotip4ik commented Jan 3, 2024 •

edited

Loading

logotip4ik commented Jan 4, 2024 •

edited

Loading