This repository has been archived by the owner on Apr 6, 2023. It is now read-only.
feat(nuxt): default router scroll behavior #3851
Merged
Changes from 28 commits
Commits
Show all changes
31 commits
Select commit
Hold shift + click to select a range
658cd35
added page:transition:finish hook
joel-wenzel 354af7c
default scroll behavior
joel-wenzel dc02ea1
support no transition and no suspense between pages
joel-wenzel 37ce115
better handling when no transitions are set
joel-wenzel 5a5b895
fix (router): simpler default scroll behavior
joel-wenzel 6af9fec
removed window on load scroll
joel-wenzel 131dcaa
Merge remote-tracking branch 'upstream/main' into feature/scroll-behaβ¦
joel-wenzel 6c80f33
Merge branch 'main' into feature/scroll-behavior
joel-wenzel 5dd0498
chore(nuxt3): white spacing fix
e434275
Merge remote-tracking branch 'upstream/main' into feature/scroll-behaβ¦
joel-wenzel d613f2c
docs: re-added page:transition:finish
joel-wenzel e1658f5
Merge branch 'main' of https://github.com/nuxt/framework into featureβ¦
joel-wenzel 293e7fc
feat (routing): handle anchor tags on the same page
joel-wenzel c93ee6c
Merge remote-tracking branch 'upstream/main' into feature/scroll-behaβ¦
joel-wenzel 7273c98
Merge branch 'main' into feature/scroll-behavior
pi0 a99e413
Merge branch 'main' into feature/scroll-behavior
pi0 533ce5c
Merge branch 'main' into pr/joel-wenzel/3851
pi0 21149bc
Merge branch 'main' into feature/scroll-behavior
joel-wenzel f0fd7f5
Merge remote-tracking branch 'upstream/main' into feature/scroll-behaβ¦
joel-wenzel a038a3e
fix (pages): keep user defined onAfterLeave transition if specified
joel-wenzel 535b116
fix (pages): include both route meta and prop transition objects
joel-wenzel e4a89a0
Merge branch 'main' into feature/scroll-behavior
joel-wenzel 1fb8a9e
Merge branch 'main' into pr/joel-wenzel/3851
pi0 6f94bc7
fix transition props merging
pi0 81568e6
lint docs
pi0 44418dd
refactor and improvements for default scroll behavior
pi0 9cceb19
more refactors and move default options to runtime
pi0 a0aaf3f
update module logic
pi0 9240ba8
restyle page.ts
pi0 3ec9051
fix: only scroll to top for non children
pi0 023936f
support `scrollToTop` page meta
pi0 File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import type { RouterConfig } from '@nuxt/schema' | ||
import type { RouterScrollBehavior } from 'vue-router' | ||
import { nextTick } from 'vue' | ||
import { useNuxtApp } from '#app' | ||
|
||
type ScrollPosition = Awaited<ReturnType<RouterScrollBehavior>> | ||
|
||
// Default router options | ||
// https://router.vuejs.org/api/#routeroptions | ||
export default <RouterConfig> { | ||
scrollBehavior (to, from, savedPosition) { | ||
const nuxtApp = useNuxtApp() | ||
|
||
// By default when the returned position is falsy or an empty object, vue-router will retain the current scroll position | ||
// savedPosition is only available for popstate navigations (back button) | ||
let position: ScrollPosition = savedPosition || undefined | ||
|
||
// Scroll to top if route is changed by default | ||
if (!position && to !== from) { | ||
position = { left: 0, top: 0 } | ||
} | ||
|
||
// Hash routes on the same page, no page hook is fired so resolve here | ||
if (to.path !== from.path) { | ||
if (from.hash && !to.hash) { | ||
return { left: 0, top: 0 } | ||
} | ||
if (to.hash) { | ||
return { el: to.hash, top: _getHashElementScrollMarginTop(to.hash) } | ||
} | ||
} | ||
|
||
// Wait for `page:transition:finish` or `page:finish` depending on if transitions are enabled or not | ||
const hasTransition = to.meta.pageTransition !== false && from.meta.pageTransition !== false | ||
const hookToWait = hasTransition ? 'page:transition:finish' : 'page:finish' | ||
return new Promise((resolve) => { | ||
nuxtApp.hooks.hookOnce(hookToWait, async () => { | ||
await nextTick() | ||
if (to.hash) { | ||
position = { el: to.hash, top: _getHashElementScrollMarginTop(to.hash) } | ||
} | ||
resolve(position) | ||
}) | ||
}) | ||
} | ||
} | ||
|
||
function _getHashElementScrollMarginTop (selector: string): number { | ||
const elem = document.querySelector(selector) | ||
if (elem) { | ||
return parseFloat(getComputedStyle(elem).scrollMarginTop) | ||
} | ||
return 0 | ||
} |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Heads up @danielroe we are calling
page:finish
in nextTick by this PR