Set instance options before the router resolves

[mvrlin]

👋 Hi!

Is it possible to set component options inside the setup before the router resolves?

Here's the code:

export default viteSSR(
  App,
  {
    pageProps: {
      passToPage: false,
    },

    routes,
  },
  (context: SSRContext) => {
    const { app, initialState, router } = context

    const head = createHead()
    app.use(head)

    router.beforeResolve((to, from, next) => {
      // Works only after the route is resolved and I re-enter the same page :(
      const myMethod = to.matched[0]?.components?.default?.myMethod
      
      if (myMethod) {
        myMethod()
      }
      
      next()
    })

    app.component(ClientOnly.name, ClientOnly)
    app.provide('initialState', initialState)

    return {
      head,
    }
  },
)

<script lang="ts" setup>
const instance = getCurrentInstance()

if (instance && instance.proxy) {
  instance.proxy.$options.myMethod = () => console.log('Hello, world')
}
</script>

The problem is that until the setup function is called, I cannot add the attribute to the $options and therefore cannot call myMethod.

Right now, I'm working for a solution like in Nuxt (asyncData), but with composable inside setup and I need a way to prevent the routing resolving before the asyncData promise will be finished, so I thought I can add a method in the component instance to prevent the router.

[frandiox]

I don't think this is possible with a pure Composition API approach. You could add a second script block (without setup) where you add your method, and then go with the Options API approach.

In any case, I think the Composition API gives you different ways to do this that might be simpler, such as Suspense and async setup. That basically stops the component rendering until your requests are done. Or you can rely on onServerPrefetch as well. Check the second example in the Vue section: https://github.com/frandiox/vite-ssr#ssr-initial-state-and-data-fetching

[mvrlin]

Thanks for the answer! But the Suspense and async are not preventing the routing :(

I want to click from the home page to the user profile's link and it should wait on the home page while the profile page data is being requested. With Suspense it actually goes to the user's page and then it needs some kind of placeholder while the request has been not finished.

[frandiox]

Ah I see. In that case you probably need to either combine Composition + Options API, or define your fetcher in the route array (route.meta.prefetch = () => {} or something like that) so it is available in the router hooks, I guess. I would also recommend checking Vitedge, which gives you the API handling (but it's not in-component fetching by default).

[mvrlin]

@frandiox, Thank you for your help. I thought for a while and came up with this solution, maybe someone will find it useful:

Initialization

// modules/asyncData.ts

import type { RouteComponent, RouteLocationNormalized } from 'vue-router'
import type { SSRContext } from '..'

type RouteComponentWithAsync = RouteComponent & {
  asyncData?: <T>(context: SSRContext) => Promise<T> | T
}

type RouteLocationWithHref = RouteLocationNormalized & {
  href?: string
}

export function installAsyncData(context: SSRContext) {
  context.router.beforeResolve(async (to: RouteLocationWithHref, from: RouteLocationWithHref, next) => {
    const initialState = context.initialState || {}

    if (from.href) {
      initialState.pageData = null
    }

    const [firstMatch] = to.matched || []

    if (!firstMatch) {
      return next()
    }

    if (!initialState.pageData) {
      const asyncData = (firstMatch.components as Record<string, RouteComponentWithAsync>)?.default?.asyncData

      if (typeof asyncData === 'function') {
        let response = await asyncData(context)

        if (Array.isArray(response) || typeof response !== 'object') {
          console.warn('AsyncData should return an object!')
          response = {}
        }

        initialState.pageData = response
      }
    }

    next()
  })
}

// main.ts

import type { SharedContext } from 'vite-ssr/utils/types'
import { installAsyncData } from './modules' 

export type SSRContext = SharedContext & {
  app: VueApp
  router: Router
}

export default viteSSR(
  // ...
  async (context: SSRContext) => {
    const { app } = context

    const head = createHead()
    app.use(head)

    app.component(ClientOnly.name, ClientOnly)
    installAsyncData(context)

    return {
      head,
    }
  },
  // ...
)

Access to the initialState

// composables/asyncRef.ts

import { useContext } from 'vite-ssr/vue'
import { ref } from 'vue'

export function useAsyncRef<T>(key: string, defaultValue?: T) {
  const context = useContext()
  const initialState = context.initialState || {}
  
  return ref<T>((initialState.pageData || {})[key] || defaultValue)
}

Usage example

<script lang="ts">
export default {
  async asyncData(context) {
    if (context.isClient) {
      console.log('Client-only code!')
    }
  
    await new Promise((resolve) => setTimeout(resolve, 2e3))
    const numbers = [1, 2, 3]

    return {
      numbers,
    }
  },
}
</script>

<script lang="ts" setup>
import { useAsyncRef } from '~/composables'
const numbers = useAsyncRef<number[]>('numbers', [])
</script>

<template>
  <h1>My Numbers:</h1>
  <pre>{{ numbers }}</pre>
</template>

[frandiox]

Thanks for sharing! So you went with a combination of Options API + Composition API, nice.
One thing, you can use the following:

import { useContext } from 'vite-ssr/vue'
//...
const { initialState } = useContext()

Instead of app.provide('initialState', initialState).