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 @@
+
+
+
+ hydrated: {{ hydrated }}
+ Count: {{ count }}
+
+
+
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 @@
+
+ Vue example
+
+
+
+
+
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 @@
-
+ Not Found
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 @@
-
-
-
-
hydrated: {{ hydrated }}
-
Count: {{ count }}
-
-
-
+ Home Page
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 @@
+
+ TODO: Server Counter
+