Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat(nuxt): client only page #25037

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 58 commits into from
Mar 6, 2024
Merged

feat(nuxt): client only page #25037

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
58 commits
Select commit Hold shift + click to select a range
0b653bc
refactor: allow wraping route component into `ClientOnly`
logotip4ik Jan 3, 2024
e3d63de
test: add tests for client only page
logotip4ik Jan 3, 2024
a0e28b9
chore: add `clientOnly` option to `PageMeta` interface
logotip4ik Jan 3, 2024
821a9c8
docs: mention `clientOnly` in definePageMeta
logotip4ik Jan 3, 2024
44e0750
fix ? wrap transition into client only
logotip4ik Jan 3, 2024
2a62ce0
test: type errors array and push only error text
logotip4ik Jan 3, 2024
4a568f8
Update docs/2.guide/2.directory-structure/1.pages.md
logotip4ik Jan 4, 2024
6f69fbc
Update packages/nuxt/src/pages/runtime/composables.ts
logotip4ik Jan 4, 2024
16e2761
Revert "fix ? wrap transition into client only"
logotip4ik Jan 4, 2024
39eb07f
wip rexport page component wrapped in createClientOnly
logotip4ik Jan 4, 2024
7221021
Merge branch 'main' into feat/client-only-page
logotip4ik Jan 14, 2024
d4c58fa
Merge branch 'main' into feat/client-only-page
logotip4ik Jan 18, 2024
b15125a
Reapply "fix ? wrap transition into client only"
logotip4ik Jan 19, 2024
ff16d81
is it really that broken ?
logotip4ik Jan 19, 2024
93bf622
Merge branch 'main' into feat/client-only-page
logotip4ik Jan 19, 2024
eaba14f
chore: invert if check
logotip4ik Jan 19, 2024
51167ff
refactor: reexport page component
logotip4ik Jan 20, 2024
8488b56
fix: export undefined if page source is empty
logotip4ik Jan 20, 2024
ba79c79
fix: only retest for client only page if not seen one yet
logotip4ik Jan 20, 2024
17caed5
fix: check macro page imports for definePageMeta macro
logotip4ik Jan 20, 2024
03703c4
refactor: remove not needed query for page component import
logotip4ik Jan 20, 2024
f8f5d9e
test: add little delay to account for vue transition
logotip4ik Jan 20, 2024
48a37cf
Merge branch 'main' into feat/client-only-page
logotip4ik Jan 20, 2024
0625b61
chore: pretend we are import from a file
logotip4ik Jan 20, 2024
f1598b1
chore: stub page wrapper file
logotip4ik Jan 20, 2024
a2fcafd
test: bump a bit delay
logotip4ik Jan 20, 2024
d462b0c
fix: actually add page wrapper stub file only for webpack
logotip4ik Jan 20, 2024
ef82a21
Merge remote-tracking branch 'origin/main' into feat/client-only-page
danielroe Jan 29, 2024
bcb046f
test: rename index client only page to index.client
logotip4ik Feb 1, 2024
7aff470
test: remove not needed `definePageMeta` call
logotip4ik Feb 1, 2024
994831b
refactor: add mode to page meta type
logotip4ik Feb 1, 2024
a273877
refactor: strip `client` extension from page segment and apply client…
logotip4ik Feb 1, 2024
6ae06e1
refactor: pass nuxt pages to page wrapper plugin to check for client …
logotip4ik Feb 1, 2024
5fc8063
refactor: use route meta to check if client mode is enabled
logotip4ik Feb 1, 2024
dd52fec
refactor: more consistent plugin naming
logotip4ik Feb 1, 2024
b9b648e
Merge branch 'main' of github.com:logotip4ik/nuxt into feat/client-on…
logotip4ik Feb 1, 2024
ad9797e
refactor: try to reexport page wrapped in createClienOnly
logotip4ik Feb 3, 2024
70409eb
chore: Remove not used plugin
logotip4ik Feb 3, 2024
ad55085
chore: less diff
logotip4ik Feb 3, 2024
c610822
chore: even less diff
logotip4ik Feb 3, 2024
4fadacf
chore: allow all page modes beeing the query value
logotip4ik Feb 3, 2024
d1417f5
Merge branch 'main' into feat/client-only-page
logotip4ik Feb 21, 2024
e831dca
Merge branch 'main' of github.com:logotip4ik/nuxt into feat/client-on…
logotip4ik Mar 1, 2024
f778228
fix: finally it works
logotip4ik Mar 1, 2024
087e038
chore: remove not used plugin
logotip4ik Mar 1, 2024
a3e7ef2
chore: cleanup type
logotip4ik Mar 1, 2024
3834257
chore: cleanup imports
logotip4ik Mar 1, 2024
68feb8b
chore: better description wording
logotip4ik Mar 1, 2024
3cefe8f
chore: run lint
logotip4ik Mar 1, 2024
5738bfe
chore: add no side effects to createClientPage
logotip4ik Mar 1, 2024
8e6ecd8
docs: add client only section in pages
logotip4ik Mar 1, 2024
da85070
docs: cleanup meta section
logotip4ik Mar 1, 2024
899ff0f
fix: allow passing down page props
logotip4ik Mar 2, 2024
6d240ce
chore: revert server replacement control flow changes
logotip4ik Mar 2, 2024
6f2620a
chore: use else-if to prevent double check
logotip4ik Mar 2, 2024
1a28d8d
Merge remote-tracking branch 'origin/main' into feat/client-only-page
danielroe Mar 6, 2024
86de839
style: lint
danielroe Mar 6, 2024
66fa33f
docs: add additional line
danielroe Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: pretend we are import from a file
  • Loading branch information
@logotip4ik
logotip4ik committed Jan 20, 2024
commit 0625b6105bf9120be2c5f8390e65f0448bf84cad
2 changes: 1 addition & 1 deletion packages/nuxt/src/pages/plugins/page-wrapper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const PageWrapper = createUnplugin(() => {
},

resolveId(id) {
if (id === virtualPageWrapperModuleId) {
if (id.endsWith('pages-wrapper.mjs')) {
return resolvedVirtualPageWrapperModuleId
}
},
Expand Down
7 changes: 3 additions & 4 deletions packages/nuxt/src/pages/runtime/page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ import { RouterView } from '#vue-router'
import { defu } from 'defu'
import type { RouteLocationNormalized, RouteLocationNormalizedLoaded } from '#vue-router'

// @ts-expect-error virtual file
import { ClientOnly } from 'virtual:pages-wrapper'

import { toArray } from './utils'
import type { RouterViewSlotProps } from './utils'
import { generateRouteKey, wrapInKeepAlive } from './utils'
Expand All @@ -16,6 +13,8 @@ import { _wrapIf } from '#app/components/utils'
import { LayoutMetaSymbol, PageRouteSymbol } from '#app/components/injections'
// @ts-expect-error virtual file
import { appKeepalive as defaultKeepaliveConfig, appPageTransition as defaultPageTransition } from '#build/nuxt.config.mjs'
// @ts-expect-error virtual file
import { ClientOnly } from '#build/pages-wrapper.mjs'
Copy link
Member

Choose a reason for hiding this comment

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

So we bundle createClientOnly even if the page is not client only in some cases ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It should bundle ClientOnly component only if at least one of the pages are client only

Copy link
Member

@huang-julien huang-julien Feb 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

yeah... can we instead wrap the page component competly with createClientOnly ? Probably at build time with unplugin that wrap the export of the SFC with createClientOnly

Because we'd bundle ClientOnly even if we're going to a page that is not client only otherwise

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Daniel also suggested that 😅. It did work, but the main problem was that the Vue showed warnings with page transitions enabled. Client only component isn't working well under transitions :(

Copy link
Member

Choose a reason for hiding this comment

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

I see, maybe can we wrap with a div so vue can correctly apply transitions ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Tried doing that and now even just wrapping page component into createClientOnly seems not working 😅

Copy link
Member

Choose a reason for hiding this comment

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

I'm currently testing island pages by defining it within the route.mjs with a dynamic import and a .then. I'm pretty sure we can do the same thing for createClientOnly


export default defineComponent({
name: 'NuxtPage',
Expand Down Expand Up @@ -165,4 +164,4 @@ function hasChildrenRoutes (fork: RouteLocationNormalizedLoaded | null, newRoute

const index = newRoute.matched.findIndex(m => m.components?.default === Component?.type)
return index < newRoute.matched.length -1
}
}