diff --git a/examples/vue-ssr-extra/README.md b/examples/vue-ssr-extra/README.md
index cbcce44f..31e2ced1 100644
--- a/examples/vue-ssr-extra/README.md
+++ b/examples/vue-ssr-extra/README.md
@@ -1 +1,5 @@
 # vue-ssr-extra
+
+## credits
+
+- https://github.com/frandiox/vite-ssr
diff --git a/examples/vue-ssr-extra/src/entry-client.ts b/examples/vue-ssr-extra/src/entry-client.ts
index c85935a9..62d9c279 100644
--- a/examples/vue-ssr-extra/src/entry-client.ts
+++ b/examples/vue-ssr-extra/src/entry-client.ts
@@ -1,20 +1,18 @@
 import { createSSRApp } from "vue";
-import { createPinia } from "pinia";
-import Page from "./routes/page.vue";
 import { createWebHistory, createRouter } from "vue-router";
-import Root from "./root.vue";
+import { routes } from "./routes";
+import App from "./routes/layout.vue";
 
 async function main() {
-  const pinia = createPinia();
   const router = createRouter({
     history: createWebHistory(),
-    routes: [{ path: "/", component: Page }],
+    routes,
   });
-  await router.isReady();
 
-  const app = createSSRApp(Root);
-  app.use(pinia);
+  const app = createSSRApp(App);
   app.use(router);
+
+  await router.isReady();
   app.mount("#root");
 }
 
diff --git a/examples/vue-ssr-extra/src/entry-server.ts b/examples/vue-ssr-extra/src/entry-server.ts
index 76f9043c..f6ede8de 100644
--- a/examples/vue-ssr-extra/src/entry-server.ts
+++ b/examples/vue-ssr-extra/src/entry-server.ts
@@ -1,25 +1,27 @@
 import { renderToWebStream } from "vue/server-renderer";
 import { createSSRApp } from "vue";
-import Page from "./routes/page.vue";
 import { createMemoryHistory, createRouter } from "vue-router";
-import Root from "./root.vue";
+import { routes } from "./routes";
+import App from "./routes/layout.vue";
 
 // cf.
 // https://github.com/frandiox/vite-ssr/blob/50461a4e0ebf431fdd96771e069a5e759e275b6b/src/vue/entry-server.ts
 
 export async function handler(req: Request) {
+  const url = new URL(req.url);
+  const href = url.href.slice(url.origin.length);
+
   // setup router
   const router = createRouter({
     history: createMemoryHistory(),
-    routes: [{ path: "/", component: Page }],
+    routes,
   });
-  const url = new URL(req.url);
-  router.push(url.href.slice(url.origin.length));
-  await router.isReady();
+  router.push(href);
 
   // render app
-  const app = createSSRApp(Root);
+  const app = createSSRApp(App);
   app.use(router);
+  await router.isReady();
 
   const ssrStream = renderToWebStream(app);
   const html = (await import("virtual:index-html")).default;
diff --git a/examples/vue-ssr-extra/src/routes.ts b/examples/vue-ssr-extra/src/routes.ts
new file mode 100644
index 00000000..dc400480
--- /dev/null
+++ b/examples/vue-ssr-extra/src/routes.ts
@@ -0,0 +1,24 @@
+import type { RouteRecordRaw } from "vue-router";
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    component: () => import("./routes/page.vue"),
+    name: "home",
+  },
+  {
+    path: "/client",
+    component: () => import("./routes/client/page.vue"),
+    name: "client",
+  },
+  {
+    path: "/server",
+    component: () => import("./routes/server/page.vue"),
+    name: "server",
+  },
+  {
+    path: "/:catchAll(.*)",
+    component: () => import("./routes/not-found.vue"),
+    name: "not-found",
+  },
+];
diff --git a/examples/vue-ssr-extra/src/routes/client/page.vue b/examples/vue-ssr-extra/src/routes/client/page.vue
new file mode 100644
index 00000000..0fce5320
--- /dev/null
+++ b/examples/vue-ssr-extra/src/routes/client/page.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+const count = ref(0);
+const hydrated = ref(false);
+
+onMounted(() => {
+  hydrated.value = true;
+});
+</script>
+
+<template>
+  <div>hydrated: {{ hydrated }}</div>
+  <div>Count: {{ count }}</div>
+  <button type="button" @click="count--">-1</button>
+  <button type="button" @click="count++">+1</button>
+</template>
diff --git a/examples/vue-ssr-extra/src/routes/layout.vue b/examples/vue-ssr-extra/src/routes/layout.vue
new file mode 100644
index 00000000..a0b71dac
--- /dev/null
+++ b/examples/vue-ssr-extra/src/routes/layout.vue
@@ -0,0 +1,19 @@
+<template>
+  <h3>Vue example</h3>
+  <nav>
+    <ul>
+      <li>
+        <RouterLink to="/">Home</RouterLink>
+      </li>
+      <li>
+        <RouterLink to="/client">Counter (client)</RouterLink>
+      </li>
+      <li>
+        <RouterLink to="/server">Counter (server)</RouterLink>
+      </li>
+    </ul>
+  </nav>
+  <main>
+    <RouterView />
+  </main>
+</template>
diff --git a/examples/vue-ssr-extra/src/root.vue b/examples/vue-ssr-extra/src/routes/not-found.vue
similarity index 50%
rename from examples/vue-ssr-extra/src/root.vue
rename to examples/vue-ssr-extra/src/routes/not-found.vue
index 7c2aa3f3..70b2843c 100644
--- a/examples/vue-ssr-extra/src/root.vue
+++ b/examples/vue-ssr-extra/src/routes/not-found.vue
@@ -1,3 +1,3 @@
 <template>
-  <RouterView />
+  <div>Not Found</div>
 </template>
diff --git a/examples/vue-ssr-extra/src/routes/page.vue b/examples/vue-ssr-extra/src/routes/page.vue
index f9ef95c7..deb86319 100644
--- a/examples/vue-ssr-extra/src/routes/page.vue
+++ b/examples/vue-ssr-extra/src/routes/page.vue
@@ -1,19 +1,3 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-
-const count = ref(0);
-const hydrated = ref(false);
-
-onMounted(() => {
-  hydrated.value = true;
-});
-</script>
-
 <template>
-  <div>
-    <div>hydrated: {{ hydrated }}</div>
-    <div>Count: {{ count }}</div>
-    <button type="button" @click="count--">-1</button>
-    <button type="button" @click="count++">+1</button>
-  </div>
+  <div>Home Page</div>
 </template>
diff --git a/examples/vue-ssr-extra/src/routes/server/page.vue b/examples/vue-ssr-extra/src/routes/server/page.vue
new file mode 100644
index 00000000..9510d5c2
--- /dev/null
+++ b/examples/vue-ssr-extra/src/routes/server/page.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>TODO: Server Counter</div>
+</template>