[VUE] Functionality of serverPrefetch?

[ondrej-langr]

Hey!

First of all - I want to say thank you for this awesome plugin!

Ive found myself in a situation where i want to use the 'serverPrefetch' on vue component and have intial data passed down to client (namely using vuex for that - as you would usually do. Call vuex query + mutation and state is on server, but no inital state is passed down to client).

Am I doing something wrong, is it this plugins missing feature or is it something different?

Thank you in advance and have a good day.

[frandiox]

@daichi-ranguru Hi!

Server Prefetch should work normally as long as you save manually the state in the initialState object.
I would recommend using the new Suspense instead of serverPrefetch because the latter is actually not mentioned in Vue 3 docs so it might be deprecated.
There's an example of Suspense here (and make sure you wrap your root in a Suspense component like this).

If you still want to use serverPrefetch instead, then your app should do something similar to the Suspense example: saving the result in initialState, but using async serverPrefetch instead of async setup for fetching.

[jeanfrancoisgb]

Not sure if this helps, but @frandiox has made a really nice boilerplate project with examples for initialstate in main.ts: https://github.com/frandiox/vitesse-ssr-template

I changed it to be quickly compatible with Vuex, until my app is more advanced, I have changed the main.ts of the project for this:

if (import.meta.env.SSR) {
      initialState.initial = store.state
      app.config.globalProperties.$api_url = import.meta.env.VITE_SSR_API_URL
    }
    else {
      // In browser, initialState will be hydrated with data from SSR
      for (const item of Object.entries(initialState.initial)) {
        store.state[item[0]] = item[1]
      }
      console.log('Initial state', store.state)

      app.config.globalProperties.$api_url = import.meta.env.VITE_API_URL
    }

Hope this helps!