Nuxt/packages/nuxt/src/app/components/nuxt-root.vue

44 lines
1.6 KiB
Vue
Raw Normal View History

<template>
<Suspense @resolve="onResolve">
<ErrorComponent v-if="error" :error="error" />
<IslandRendererer v-else-if="islandContext" :context="islandContext" />
<AppComponent v-else />
</Suspense>
</template>
<script setup>
2023-01-23 23:37:38 +00:00
import { defineAsyncComponent, onErrorCaptured, onServerPrefetch, provide } from 'vue'
import { callWithNuxt, isNuxtError, showError, useError, useRoute, useNuxtApp } from '#app'
import AppComponent from '#build/app-component.mjs'
const ErrorComponent = defineAsyncComponent(() => import('#build/error-component.mjs').then(r => r.default || r))
const IslandRendererer = process.server
? defineAsyncComponent(() => import('./island-renderer').then(r => r.default || r))
: () => null
const nuxtApp = useNuxtApp()
const onResolve = nuxtApp.deferHydration()
// Inject default route (outside of pages) as active route
provide('_route', useRoute())
// vue:setup hook
const results = nuxtApp.hooks.callHookWith(hooks => hooks.map(hook => hook()), 'vue:setup')
if (process.dev && results && results.some(i => i && 'then' in i)) {
console.error('[nuxt] Error in `vue:setup`. Callbacks must be synchronous.')
}
// error handling
const error = useError()
onErrorCaptured((err, target, info) => {
nuxtApp.hooks.callHook('vue:error', err, target, info).catch(hookError => console.error('[nuxt] Error in `vue:error` hook', hookError))
if (process.server || (isNuxtError(err) && (err.fatal || err.unhandled))) {
const p = callWithNuxt(nuxtApp, showError, [err])
onServerPrefetch(() => p)
}
})
// Component islands context
const { islandContext } = process.server && nuxtApp.ssrContext
</script>