chore: setup pages

examples/vue-ssr-extra/README.md

@@ -1 +1,5 @@
 # vue-ssr-extra
+
+## credits
+
+- https://github.com/frandiox/vite-ssr

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");
 }
 

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;

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",
+  },
+];

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>

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>

examples/vue-ssr-extra/src/root.vue → examples/vue-ssr-extra/src/routes/not-found.vue

@@ -1,3 +1,3 @@
 <template>
-  <RouterView />
+  <div>Not Found</div>
 </template>

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>

examples/vue-ssr-extra/src/routes/server/page.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>TODO: Server Counter</div>
+</template>