fix: currentNav updated after page change

Also disabled smart prefetch for lazy components in the meantime

package.json

@@ -48,6 +48,9 @@
     "clean:dist": "rm -rf dist docs/dist playground/dist nuxtjs.org/dist",
     "clean": "yarn clean:nuxt & yarn clean:node_modules & yarn clean:dist"
   },
+  "resolutions": {
+    "@nuxt/components": "npm:@pi0/components"
+  },
   "dependencies": {
     "@docsearch/css": "^1.0.0-alpha.28",
     "@docsearch/js": "^1.0.0-alpha.28",
@@ -144,8 +147,5 @@
   },
   "peerDependencies": {
     "vuex": "^3.6.2"
-  },
-  "resolutions": {
-    "@nuxt/components": "npm:@pi0/components"
   }
 }

src/app/pages/_.vue

@@ -116,6 +116,8 @@ export default defineComponent({
 
     // Set Docus runtime current page
     this.$docus.currentPage.value = this.page
+    // Update navigation path to update currentNav
+    this.$docus.currentPath.value = `/${this.$route.params.pathMatch}`
   },
   mounted() {
     if (this.page?.version) localStorage.setItem(`page-${this.page.slug}-version`, this.page.version)

src/core/runtime/components/DocusContent.ts

@@ -118,9 +118,10 @@ function processNode(node, h, doc) {
     children.push(...processQueue.map(node => processNode(node, h, doc)))
   }
 
-  if (process.server && typeof Vue.component(pascalCase(node.tag)) === 'function') {
-    lazyComponents.add(pascalCase(node.tag))
-  }
+  // Disable in the meantime
+  // if (process.server && typeof Vue.component(pascalCase(node.tag)) === 'function') {
+  //   lazyComponents.add(pascalCase(node.tag))
+  // }
   return h(node.tag, data, children)
 }
 

src/core/runtime/composables/helpers.ts

@@ -13,7 +13,8 @@ export const clientAsyncData = (_app, $nuxt: any) => {
     const loadComponents = function (components?: Set<string>) {
       if (!components) return
       return Array.from(components).map(async function (name) {
-        if (!loadedComponents.has(name) && typeof Vue.component(name) === 'function') {
+        const component: any = Vue.component(name)
+        if (!loadedComponents.has(name) && typeof component === 'function' && !component.options) {
           loadedComponents.add(name)
           try {
             // @ts-ignore
@@ -32,7 +33,7 @@ export const clientAsyncData = (_app, $nuxt: any) => {
         $nuxt.fetchPayload = async function (...args) {
           const payload = await originalFetchPayload(...args)
 
-          await loadComponents(payload.fetch?._lazyComponents)
+          // await loadComponents(payload.fetch?._lazyComponents)
           await loadComponents(new Set(payload.data[0]?.page?.template))
 
           return payload

src/core/runtime/composables/navigation.ts

@@ -1,18 +1,14 @@
 import { withTrailingSlash } from 'ufo'
 import { ref, computed } from '@nuxtjs/composition-api'
 import { DocusAddonContext, DocusNavigationGetParameters, NavItem } from '../../../types'
-import { useReactivePath } from './reactivePath'
 import { useDocusTemplates } from './templates'
 
 /**
  * Handling all the navigation querying logic.
  */
 export const useDocusNavigation = ({ context, state, api }: DocusAddonContext) => {
   // Nuxt context
-  const { app, route } = context
-
-  // Reactive router path
-  const { path } = useReactivePath(app, route)
+  const { app } = context
 
   // Init navigation object if not preset
   if (!state.navigation) state.navigation = {}
@@ -130,7 +126,7 @@ export const useDocusNavigation = ({ context, state, api }: DocusAddonContext) =
    * Check if a "to" path is the currently active path.
    */
   function isLinkActive(to: string) {
-    return withTrailingSlash(path.value) === withTrailingSlash(context.$contentLocalePath(to))
+    return withTrailingSlash(state.currentPath) === withTrailingSlash(context.$contentLocalePath(to))
   }
 
   /**
@@ -140,9 +136,9 @@ export const useDocusNavigation = ({ context, state, api }: DocusAddonContext) =
     // eslint-disable-next-line no-unused-expressions
     fetchCounter.value
 
-    // Calcualte navigatin based on current path
+    // Calculate the navigation based on current path
     return get({
-      from: path.value
+      from: state.currentPath
     })
   })
 

src/core/runtime/docus.ts

@@ -21,13 +21,14 @@ export const createDocus = async (
   // Nuxt instance proxy
   let $nuxt: any
 
-  const { ssrContext, nuxtState = {} } = context
+  const { ssrContext, nuxtState = {}, route } = context
 
   // Prevent hydration mismatch: inject templateOptions from ssr payload before page load
   const templateOptions = nuxtState.data?.[0].templateOptions || {}
 
   // State
   const state = reactive({
+    currentPath: `/${route.params.pathMatch}`,
     currentPage: null,
     settings: null,
     theme: null,

src/types/core.ts

@@ -170,6 +170,7 @@ export interface DocusSettings<T = DefaultThemeSettings> {
 
 export type DocusState<T = DefaultThemeSettings> = {
   // Core
+  currentPath: string
   currentPage: DocusDocument | null
   settings: DocusSettings<T> | null
   navigation: DocusNavigation