Skip to content
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

Jump to bottom

feat(nuxt): start loading indicator state with middleware #21003

Merged
merged 5 commits into from Jun 16, 2023
Merged

feat(nuxt): start loading indicator state with middleware #21003

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e31e551
Declare and rely on new hook, see #19528
quentint May 22, 2023
f023edb
Ranem router hooks and call them, see #19528
quentint May 22, 2023
18869b2
[autofix.ci] apply automated fixes
autofix-ci[bot] Jun 6, 2023
f530e56
Merge remote-tracking branch 'origin/main' into pr/quentint/21003
danielroe Jun 15, 2023
c96604a
refactor: use router navigation guards
danielroe Jun 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/nuxt/src/app/components/nuxt-loading-indicator.ts
View file
Open in desktop
Expand Up @@ -30,7 +30,7 @@ export default defineComponent({
// Hook to app lifecycle
// TODO: Use unified loading API
const nuxtApp = useNuxtApp()
nuxtApp.hook('page:start', indicator.start)
nuxtApp.hook('router:beforeMiddleware', indicator.start)
Copy link
Member

Choose a reason for hiding this comment

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

what about using useRouter().beforeEach(indicator.start) and afterEach instead of introducing new hooks?

Copy link
Member

Choose a reason for hiding this comment

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

Pushed an implementation - what do you think? Do you see any issues with this approach?

nuxtApp.hook('page:finish', indicator.finish)
nuxtApp.hook('vue:error', indicator.finish)
onBeforeUnmount(indicator.clear)
Expand Down
2 changes: 2 additions & 0 deletions packages/nuxt/src/app/nuxt.ts
View file
Open in desktop
Expand Up @@ -41,6 +41,8 @@ export interface RuntimeNuxtHooks {
'app:chunkError': (options: { error: any }) => HookResult
'app:data:refresh': (keys?: string[]) => HookResult
'link:prefetch': (link: string) => HookResult
'router:beforeMiddleware': (Component?: VNode) => HookResult
'router:afterMiddleware': (Component?: VNode) => HookResult
'page:start': (Component?: VNode) => HookResult
'page:finish': (Component?: VNode) => HookResult
'page:transition:start': () => HookResult
Expand Down
4 changes: 4 additions & 0 deletions packages/nuxt/src/app/plugins/router.ts
View file
Open in desktop
Expand Up @@ -233,6 +233,8 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>({
if (nuxtApp.isHydrating && initialLayout.value && !isReadonly(to.meta.layout)) {
to.meta.layout = initialLayout.value
}

nuxtApp.callHook('router:beforeMiddleware')
nuxtApp._processingMiddleware = true

if (process.client || !nuxtApp.ssrContext?.islandContext) {
Expand All @@ -253,6 +255,8 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>({
if (result || result === false) { return result }
}
}

nuxtApp.callHook('router:afterMiddleware')
})

router.afterEach(() => { delete nuxtApp._processingMiddleware })
Expand Down