How to do manual SSR

[seyyed-iman-asnafi]

Vue version

3.3.4

Link to minimal reproduction

Steps to reproduce

I have a SSR Hydration issue

Error:

But i have just a simple App.vue

<template>
    <RouterView/>
</template>

Router

import { createRouter, createWebHistory, createMemoryHistory } from 'vue-router';

import { IS_CLIENT } from '../util';

// Views
import TestView from '../pages/Test.vue';

const router = createRouter({
    history: IS_CLIENT ? createWebHistory() : createMemoryHistory(),

    routes: [
        {
            path: '/',
            name: 'Home',
            component: TestView
        }
    ]
});

export default router;

TestView.vue

<template>
    <h1>TEST</h1>
</template>

Created Html from server:

<div id="app"><h1>TEST</h1></div>

Why i get this warning?!

What is expected?

Just do work properly

What is actually happening?

God know

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-13400
    Memory: 2.35 GB / 15.78 GB
  Binaries:
    Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (119.0.2151.93)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

No response

[edison1105]

Without a reproducible demo, we have no way to locate the problem.

[seyyed-iman-asnafi]

@edison1105 StackBlitz

[LinusBorg]

import { createApp } from './main';
import router from './router';

const { app } = await createApp();
await router.isReady();

app.mount('#app');

https://router.vuejs.org/api/interfaces/Router.html#isReady

[runarberg]

I started getting these warnings after pushing the initial route in entry-server.js with:

await route.replace(url);

Adding await router.isReady() to entry-client.js fixed this.

[posva]

Other things aren't setup properly in your stackblitz: you need to create one router per app, use createApp() on client instead of the SSR equivalent. You can find all the details on

• https://vuejs.org/guide/scaling-up/ssr.html#server-side-rendering-ssr
• https://vitejs.dev/guide/ssr.html (there is an example)

For production Apps, I recommend you to give Nuxt or any of their recommendations on the vuejs guide a try. They come with SSR setup and a lot of other interesting features

[gokhantaskan]

I'm facing this issue after I upgraded Nuxt to the latest version (^3.13.0) and used grouping pages with the "(...)" syntax. I can't reproduce it right now. I checked several routes, and one of them produced this issue. I will look into this more later today.

[gokhantaskan]

I figured it out! The issue was with useSharedComposable from @vueuse/core, not directly with Nuxt and Vue Router.