create-phial 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Maofeng <hornjs@qq.com> (https://github.com/hornjs)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# create-phial
+
+Scaffold a new [Phial](https://github.com/hornjs/phial) application.
+
+## Usage
+
+With `pnpm`:
+
+```bash
+pnpm create phial my-app
+cd my-app
+pnpm install
+pnpm dev
+```
+
+With `npm`:
+
+```bash
+npm create phial@latest my-app
+cd my-app
+npm install
+npm run dev
+```
+
+With `yarn`:
+
+```bash
+yarn create phial my-app
+cd my-app
+yarn install
+yarn dev
+```
+
+## Options
+
+```
+Usage: create-phial <project-dir> [options]
+
+Options:
+  --template <name>         Scaffold template name. Supported: default, zero-config
+  --package-manager <name>  Package manager to suggest/install with: pnpm, npm, yarn, bun
+  --install                 Install dependencies after scaffolding
+  --force                   Allow writing into a non-empty target directory
+  -h, --help                Show this help message
+```
+
+## Templates
+
+- `default` - Full-featured template with examples for pages, middleware, loaders, and server routes.
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import{createRequire as e}from"node:module";import{spawn as t}from"node:child_process";import{mkdir as n,readFile as r,readdir as i,stat as a,writeFile as o}from"node:fs/promises";import{basename as s,dirname as c,join as l,relative as u,resolve as d}from"node:path";import f from"node:process";import{fileURLToPath as p}from"node:url";const m=d(c(p(import.meta.url)),`../templates`),h=`default`,g=new Map([[`default`,`default`],[`zero-config`,`default`]]);async function _(e={}){let t=d(d(e.cwd??f.cwd()),e.target??`phial-app`),n=d(m,T(e.template)),r=e.packageManager??D(),i=e.install??!1,a=e.force??!1;await x(n),await S(t,{force:a});let o=A(s(t)),c=await M();return await C(n,t,{packageManager:r,packageName:o,projectName:s(t),phialVersion:`^${c}`,buildCommand:k(r,`build`),devCommand:k(r,`dev`),startCommand:k(r,`start`),installCommand:O(r)}),i&&await j(t,r),{targetDir:t,packageManager:r,install:i}}function v(e){let t=[...e],n={template:h,packageManager:D(),install:!1,force:!1};for(;t.length>0;){let e=t.shift();if(e){if(e===`--help`||e===`-h`)return{help:!0};if(e===`--install`){n.install=!0;continue}if(e===`--no-install`){n.install=!1;continue}if(e===`--force`){n.force=!0;continue}if(e===`--template`){let e=t.shift();if(!e)throw Error(`Missing value for --template`);n.template=e;continue}if(e===`--package-manager`){let e=t.shift();if(!e)throw Error(`Missing value for --package-manager`);n.packageManager=E(e);continue}if(e.startsWith(`--`))throw Error(`Unknown option: ${e}`);if(!n.target){n.target=e;continue}throw Error(`Unexpected argument: ${e}`)}}return n}function y(){console.log([`Usage: create-phial <project-dir> [options]`,``,`Options:`,`  --template <name>         Scaffold template name. Supported: default, zero-config`,`  --package-manager <name>  Package manager to suggest/install with: pnpm, npm, yarn, bun`,`  --install                 Install dependencies after scaffolding`,`  --force                   Allow writing into a non-empty target directory`,`  -h, --help                Show this help message`].join(`
+`))}function b(e,t=f.cwd()){let n=u(t,e.targetDir)||`.`,r=e.packageManager,i=[``,`Scaffolded Phial app in ${e.targetDir}`,``,`Next steps:`];n!==`.`&&i.push(`  cd ${n}`),e.install||i.push(`  ${O(r)}`),i.push(`  ${k(r,`dev`)}`),console.log(i.join(`
+`))}async function x(e){if(!(await a(e).catch(()=>null))?.isDirectory())throw Error(`Unknown template: ${s(e)}`)}async function S(e,t){let r=await a(e).catch(()=>null);if(!r){await n(e,{recursive:!0});return}if(!r.isDirectory())throw Error(`Target path is not a directory: ${e}`);if((await i(e)).length>0&&!t.force)throw Error(`Target directory is not empty: ${e}. Use --force to continue.`)}async function C(e,t,a){let s=await i(e,{withFileTypes:!0});for(let i of s){let s=l(e,i.name),u=l(t,i.name);if(i.name===`_gitignore`&&(u=l(t,`.gitignore`)),i.isDirectory()){await n(u,{recursive:!0}),await C(s,u,a);continue}let d=w(await r(s,`utf8`),a);await n(c(u),{recursive:!0}),await o(u,d)}}function w(e,t){return e.replace(/\{\{\s*(\w+)\s*\}\}/g,(e,n)=>n in t?String(t[n]):``)}function T(e){let t=String(e??h).trim(),n=g.get(t);if(!n)throw Error(`Unsupported template: ${t}`);return n}function E(e){switch(e){case`pnpm`:case`npm`:case`yarn`:case`bun`:return e;default:throw Error(`Unsupported package manager: ${e}`)}}function D(){let e=f.env.npm_config_user_agent??``;return e.startsWith(`pnpm/`)?`pnpm`:e.startsWith(`yarn/`)?`yarn`:e.startsWith(`bun/`)?`bun`:`npm`}function O(e){return`${e} install`}function k(e,t){return e===`npm`?`npm run ${t}`:e===`bun`?`bun run ${t}`:`${e} ${t}`}function A(e){return e.trim().toLowerCase().replace(/[^a-z0-9._-]+/g,`-`).replace(/^[._-]+/,``).replace(/[._-]+$/,``)||`phial-app`}async function j(e,n){let r=n,i=[`install`];await new Promise((a,o)=>{let s=t(r,i,{cwd:e,stdio:`inherit`,shell:f.platform===`win32`});s.on(`exit`,e=>{if(e===0){a();return}o(Error(`${n} install failed with exit code ${e??`null`}`))}),s.on(`error`,o)})}async function M(){let t=e(import.meta.url).resolve(`phial/package.json`),n=JSON.parse(await r(t,`utf8`));if(typeof n.version!=`string`||n.version.length===0)throw Error(`Installed phial package is missing a version: ${t}`);return n.version}export{_ as createPhialApp,v as parseArgs,y as printHelp,b as printNextSteps};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "create-phial",
+  "version": "0.0.1",
+  "description": "Scaffold a new Phial application.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Maofeng <hornjs@qq.com>",
+  "keywords": [
+    "phial",
+    "scaffold",
+    "ssr",
+    "vue"
+  ],
+  "homepage": "https://github.com/author/library#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/author/library.git"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist",
+    "package.json",
+    "templates"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "cac": "^7.0.0",
+    "picocolors": "^1.1.1",
+    "phial": "latest"
+  },
+  "bin": {
+    "create-phial": "./dist/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/templates/default/README.md

@@ -0,0 +1,54 @@
+# {{projectName}}
+
+A Phial application scaffolded by `create-phial`.
+
+## Included examples
+
+- `/` uses Vue `h()` render functions.
+- `/jsx` uses Vue JSX/TSX.
+- `/sfc` uses a Vue single-file component.
+- `/blog/hello-world` shows a dynamic file route.
+
+The template also supports:
+
+- `app/loader.ts` for app-shell data exposed through `useAppData()`
+- `app/middleware/*.ts` for named reusable middleware
+- `app/pages/loading.*` for route loading boundaries
+- `app/pages/**/_middleware.ts` for directory-scoped route middleware
+- `server/routes/**/*.ts` for raw HTTP handlers exported as plain objects
+- `server/middleware/*.ts` for named reusable server middleware
+- `server/routes/**/_middleware.ts` for directory-scoped server middleware
+- `phial.config.ts -> server.middleware` for global server middleware
+- `phial prepare` for generating `.phial/types/`
+
+## Development
+
+```bash
+{{installCommand}}
+{{devCommand}}
+```
+
+The scaffold also defines `pnpm prepare`, which runs `phial prepare` and refreshes `.phial/types/` so app/server middleware completion and generated app-route types stay current.
+
+Server routes are path-owned: if a `server/routes` pattern overlaps with an `app/pages` pattern, Phial throws during scanning instead of splitting ownership by method.
+
+## Build
+
+```bash
+{{installCommand}}
+{{buildCommand}}
+```
+
+By default Phial writes the production build to:
+
+- `.output/public/` for client assets
+- `.output/server/index.js` for the server bundle
+
+If you explicitly set `vite.build.outDir`, Phial will use that directory for the client build.
+
+## Start
+
+```bash
+{{installCommand}}
+{{startCommand}}
+```

package/templates/default/_gitignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+.phial
+.output
+dist
+.vite
+*.local

package/templates/default/app/app.config.ts

@@ -0,0 +1 @@
+export default {};

package/templates/default/app/app.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useAppData } from "phial";
+
+interface AppData {
+  theme: "light" | "sepia";
+  requestedAt: string;
+}
+
+const appData = useAppData<AppData>();
+const theme = computed(() => appData.value?.theme ?? "sepia");
+const bodyStyle = computed(() =>
+  theme.value === "light"
+    ? "margin: 0; background: #f5f7fb; color: #172033;"
+    : "margin: 0; background: #f7f4ef; color: #1b1b18;",
+);
+</script>
+
+<template>
+  <html lang="en">
+    <head>
+      <title>{{ projectName }}</title>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+    <body :data-theme="theme" :style="bodyStyle">
+      <slot />
+    </body>
+  </html>
+</template>

package/templates/default/app/assets/.gitkeep

@@ -0,0 +1 @@
+

package/templates/default/app/components/.gitkeep

@@ -0,0 +1 @@
+

package/templates/default/app/composables/.gitkeep

@@ -0,0 +1 @@
+

package/templates/default/app/error.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+  error?:
+    | {
+        message?: string;
+      }
+    | string;
+  routeId?: string;
+}>();
+</script>
+
+<template>
+  <main
+    data-phial-error=""
+    style="
+      margin: 0 auto;
+      max-width: 720px;
+      padding: 48px 24px;
+      font-family: ui-sans-serif, system-ui;
+      line-height: 1.6;
+    "
+  >
+    <h1>Something broke</h1>
+    <p>{{ typeof error === "string" ? error : (error?.message ?? "Unexpected error") }}</p>
+    <p v-if="routeId" style="color: #6e665d">Failed route: {{ routeId }}</p>
+  </main>
+</template>

package/templates/default/app/loader.ts

@@ -0,0 +1,8 @@
+export default async function loadAppData(request: Request) {
+  const url = new URL(request.url);
+
+  return {
+    theme: url.searchParams.get("theme") === "light" ? "light" : "sepia",
+    requestedAt: new Date().toISOString(),
+  };
+}

package/templates/default/app/middleware/.gitkeep

@@ -0,0 +1 @@
+

package/templates/default/app/middleware/blog-trace.ts

@@ -0,0 +1,7 @@
+export default async function blogTraceMiddleware(
+  context: { params: Record<string, string> },
+  next: () => Promise<Response | void>,
+) {
+  void context.params;
+  return next();
+}

package/templates/default/app/middleware/post-trace.ts

@@ -0,0 +1,7 @@
+export default async function postTraceMiddleware(
+  context: { params: Record<string, string> },
+  next: () => Promise<Response | void>,
+) {
+  void context.params;
+  return next();
+}

package/templates/default/app/middleware/request-meta.ts

@@ -0,0 +1,7 @@
+export default async function requestMetaMiddleware(
+  context: { request: Request },
+  next: () => Promise<Response | void>,
+) {
+  void context.request;
+  return next();
+}

package/templates/default/app/pages/action.ts

@@ -0,0 +1,15 @@
+export async function action({ formData }: { formData: FormData }) {
+  const name = String(formData.get("name") ?? "").trim();
+  if (!name) {
+    return {
+      ok: false,
+      message: "Please enter a name before submitting the demo form.",
+    };
+  }
+
+  return {
+    ok: true,
+    message: `Saved a greeting for ${name}.`,
+    submittedAt: new Date().toISOString(),
+  };
+}

package/templates/default/app/pages/blog/[slug]/loader.ts

@@ -0,0 +1,10 @@
+export async function loader({ params }: { params: Record<string, string> }) {
+  await new Promise((resolve) => setTimeout(resolve, 220));
+  const slug = params.slug ?? "unknown";
+
+  return {
+    slug,
+    middlewareTrace: `directory:${slug} > route:${slug}`,
+    summary: `Loaded post "${slug}" through a file route.`,
+  };
+}

package/templates/default/app/pages/blog/[slug]/loading.ts

@@ -0,0 +1,46 @@
+import { defineComponent, h } from "vue";
+
+type RouteLoadingProps = {
+  routeId: string;
+  location: string;
+};
+
+export default defineComponent({
+  name: "ExampleBlogLoading",
+  props: {
+    routeId: {
+      type: String,
+      required: true,
+    },
+    location: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props: Pick<RouteLoadingProps, "routeId" | "location">) {
+    return () =>
+      h(
+        "article",
+        {
+          style:
+            "display: grid; gap: 12px; margin-top: 12px; padding: 18px; border-radius: 14px; background: #f5f5f2; border: 1px solid #dad8d1;",
+        },
+        [
+          h(
+            "h1",
+            {
+              style: "margin: 0;",
+            },
+            "Loading blog article...",
+          ),
+          h(
+            "p",
+            {
+              style: "margin: 0; color: #6c6c66;",
+            },
+            `Preparing ${props.location}`,
+          ),
+        ],
+      );
+  },
+});

package/templates/default/app/pages/blog/[slug]/middleware.ts

@@ -0,0 +1 @@
+export default ["post-trace"];

package/templates/default/app/pages/blog/[slug]/page.ts

@@ -0,0 +1,24 @@
+import { defineComponent, h } from "vue";
+import { useLoaderData, useRoute } from "phial";
+
+interface RouteData {
+  middlewareTrace: string;
+  slug: string;
+  summary: string;
+}
+
+export default defineComponent({
+  name: "BlogPostPage",
+  setup() {
+    const route = useRoute();
+    const data = useLoaderData<RouteData>();
+
+    return () =>
+      h("section", null, [
+        h("h1", null, data.value?.slug ?? "Unknown post"),
+        h("p", null, data.value?.summary ?? ""),
+        h("p", null, `Middleware trace: ${data.value?.middlewareTrace ?? "missing"}`),
+        h("p", null, `Current route path: ${route.value.fullPath}`),
+      ]);
+  },
+});

package/templates/default/app/pages/blog/_middleware.ts

@@ -0,0 +1 @@
+export default ["blog-trace"];

package/templates/default/app/pages/jsx/page.tsx

@@ -0,0 +1,36 @@
+import { computed, defineComponent } from "vue";
+import { RouterLink, useAppData, useRoute } from "phial";
+
+interface AppData {
+  theme: "light" | "sepia";
+}
+
+export default defineComponent({
+  name: "JsxExamplePage",
+  setup() {
+    const route = useRoute();
+    const appData = useAppData<AppData>();
+    const theme = computed(() => appData.value?.theme ?? "sepia");
+
+    return () => (
+      <section>
+        <h1>Vue JSX example</h1>
+        <p>
+          This route is implemented with a <code>.tsx</code> file.
+        </p>
+        <ul>
+          <li>
+            Current path: <strong>{route.value.fullPath}</strong>
+          </li>
+          <li>
+            Theme from app loader: <strong>{theme.value}</strong>
+          </li>
+        </ul>
+        <p>
+          Navigate to the <RouterLink to="/sfc">SFC example</RouterLink> or back to the{" "}
+          <RouterLink to="/">h() example</RouterLink>.
+        </p>
+      </section>
+    );
+  },
+});

package/templates/default/app/pages/layout.ts

@@ -0,0 +1,49 @@
+import { computed, defineComponent, h } from "vue";
+import { RouterLink, useAppData } from "phial";
+
+interface AppData {
+  theme: "light" | "sepia";
+  requestedAt: string;
+}
+
+export default defineComponent({
+  name: "RootLayout",
+  setup(_, { slots }) {
+    const appData = useAppData<AppData>();
+    const requestedAt = computed(() => appData.value?.requestedAt ?? "");
+    const theme = computed(() => appData.value?.theme ?? "sepia");
+
+    return () =>
+      h(
+        "div",
+        {
+          style:
+            "font-family: ui-sans-serif, system-ui; margin: 0 auto; max-width: 720px; padding: 48px 24px; line-height: 1.6;",
+        },
+        [
+          h(
+            "header",
+            {
+              style:
+                "display: flex; gap: 16px; align-items: center; margin-bottom: 32px; flex-wrap: wrap;",
+            },
+            [
+              h("strong", null, "{{projectName}}"),
+              h(RouterLink, { to: "/" }, { default: () => "h()" }),
+              h(RouterLink, { to: "/jsx" }, { default: () => "JSX" }),
+              h(RouterLink, { to: "/sfc" }, { default: () => "SFC" }),
+              h(RouterLink, { to: "/blog/hello-world" }, { default: () => "Dynamic Route" }),
+              h(
+                "span",
+                {
+                  style: "margin-left: auto; font-size: 13px; color: #6e665d;",
+                },
+                `theme=${theme.value} · shell=${requestedAt.value}`,
+              ),
+            ],
+          ),
+          h("main", null, slots.default?.()),
+        ],
+      );
+  },
+});

package/templates/default/app/pages/loader.ts

@@ -0,0 +1,11 @@
+export async function loader({ request }: { request: Request }) {
+  await new Promise((resolve) => setTimeout(resolve, 120));
+  const url = new URL(request.url);
+
+  return {
+    fromAppMiddleware: true,
+    requestPath: url.pathname,
+    message: "Hello from the root page loader.",
+    renderedAt: new Date().toISOString(),
+  };
+}

package/templates/default/app/pages/loading.ts

@@ -0,0 +1,55 @@
+import { computed, defineComponent, h } from "vue";
+
+type RouteLoadingProps = {
+  routeId: string;
+  location: string;
+  previousLocation?: string;
+  action: string;
+};
+
+export default defineComponent({
+  name: "ExampleRootLoading",
+  props: {
+    routeId: {
+      type: String,
+      required: true,
+    },
+    location: {
+      type: String,
+      required: true,
+    },
+    previousLocation: {
+      type: String,
+      default: "",
+    },
+    action: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props: RouteLoadingProps) {
+    const description = computed(() => {
+      const previous = props.previousLocation ? ` from ${props.previousLocation}` : "";
+      return `Navigating to ${props.location}${previous} (${props.action})`;
+    });
+
+    return () =>
+      h(
+        "section",
+        {
+          style:
+            "margin-top: 24px; padding: 18px; border: 1px dashed #c9bda9; border-radius: 14px; background: #f7f1e8; color: #6a5843;",
+        },
+        [
+          h("strong", null, "Root layout loading..."),
+          h(
+            "p",
+            {
+              style: "margin: 10px 0 0;",
+            },
+            description.value,
+          ),
+        ],
+      );
+  },
+});

package/templates/default/app/pages/page.ts

@@ -0,0 +1,158 @@
+import { computed, defineComponent, h } from "vue";
+import {
+  useActionData,
+  useLoaderData,
+  useNavigation,
+  useRouteLoaderData,
+  useSubmit,
+} from "phial";
+
+interface LayoutLoaderData {
+  fromAppMiddleware: boolean;
+  message: string;
+  renderedAt: string;
+  requestPath: string;
+}
+
+interface LayoutActionData {
+  ok: boolean;
+  message: string;
+  submittedAt?: string;
+}
+
+export default defineComponent({
+  name: "HomePage",
+  setup() {
+    const data = useLoaderData();
+    const layoutData = useRouteLoaderData<LayoutLoaderData>("layout");
+    const actionData = useActionData();
+    const layoutActionData = useActionData<LayoutActionData>("layout");
+    const navigation = useNavigation();
+    const submit = useSubmit();
+    const renderedAt = computed(() => layoutData.value?.renderedAt ?? "");
+    const submittedAt = computed(() => layoutActionData.value?.submittedAt ?? "");
+    const feedbackTone = computed(() =>
+      layoutActionData.value?.ok === false ? "#8a2d1f" : "#1f5f3b",
+    );
+
+    async function handleSubmit(event: Event) {
+      const form = event.currentTarget as HTMLFormElement | null;
+      if (!form) {
+        return;
+      }
+
+      event.preventDefault();
+
+      try {
+        await submit(form);
+      } catch {
+        // Keep example errors local so the page shows inline action feedback.
+      }
+    }
+
+    return () =>
+      h("section", null, [
+        h("h1", null, "Vue h() example"),
+        h(
+          "p",
+          null,
+          "This homepage is implemented with a render function and also demonstrates loader/action data.",
+        ),
+        h("p", null, [
+          "Current page loader: ",
+          h("strong", null, data.value ? "available" : "none"),
+        ]),
+        h("p", null, layoutData.value?.message ?? ""),
+        h(
+          "p",
+          null,
+          `App middleware active: ${layoutData.value?.fromAppMiddleware ? "yes" : "no"}`,
+        ),
+        h("p", null, `Request path seen by middleware: ${layoutData.value?.requestPath ?? "/"}`),
+        h("p", null, `SSR time: ${renderedAt.value}`),
+        h("ul", null, [
+          h("li", null, "Visit /jsx for the Vue JSX example."),
+          h("li", null, "Visit /sfc for the Vue single-file component example."),
+          h("li", null, "Visit /blog/hello-world for the dynamic route example."),
+        ]),
+        h(
+          "form",
+          {
+            method: "post",
+            onSubmit: handleSubmit,
+            style:
+              "display: grid; gap: 12px; margin-top: 28px; padding: 18px; border: 1px solid #d9d0c2; border-radius: 14px; background: #fffdfa;",
+          },
+          [
+            h("strong", null, "Action demo"),
+            h(
+              "label",
+              {
+                style: "display: grid; gap: 6px;",
+              },
+              [
+                h("span", null, "Your name?"),
+                h("input", {
+                  name: "name",
+                  type: "text",
+                  placeholder: "Ada Lovelace",
+                  style:
+                    "padding: 10px 12px; border: 1px solid #c9bda9; border-radius: 10px; font: inherit;",
+                }),
+              ],
+            ),
+            h(
+              "div",
+              {
+                style: "display: flex; gap: 12px; align-items: center; flex-wrap: wrap;",
+              },
+              [
+                h(
+                  "button",
+                  {
+                    type: "submit",
+                    disabled: navigation.isSubmitting.value,
+                    style:
+                      "padding: 10px 14px; border: 0; border-radius: 999px; background: #1b1b18; color: #f7f4ef; font: inherit; cursor: pointer;",
+                  },
+                  navigation.isSubmitting.value ? "Submitting..." : "Submit action",
+                ),
+                h(
+                  "span",
+                  {
+                    style: "font-size: 14px; color: #6e665d;",
+                  },
+                  `Action state: ${navigation.isSubmitting.value ? "submitting" : layoutActionData.value ? "success" : "idle"}`,
+                ),
+              ],
+            ),
+            h(
+              "p",
+              {
+                style: "margin: 0; color: #6e665d;",
+              },
+              `Current page action data: ${actionData.value ? "available" : "none"}`,
+            ),
+            layoutActionData.value
+              ? h(
+                  "p",
+                  {
+                    style: `margin: 0; color: ${feedbackTone.value};`,
+                  },
+                  layoutActionData.value.message,
+                )
+              : null,
+            layoutActionData.value?.submittedAt
+              ? h(
+                  "p",
+                  {
+                    style: "margin: 0; font-size: 14px; color: #6e665d;",
+                  },
+                  `Submitted at: ${submittedAt.value}`,
+                )
+              : null,
+          ],
+        ),
+      ]);
+  },
+});

package/templates/default/app/pages/sfc/page.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { RouterLink, useAppData, useRoute } from "phial";
+
+const route = useRoute();
+const appData = useAppData<{ theme: "light" | "sepia" }>();
+const theme = computed(() => appData.value?.theme ?? "sepia");
+</script>
+
+<template>
+  <section>
+    <h1>Vue SFC example</h1>
+    <p>This route is implemented with a <code>.vue</code> file.</p>
+    <ul>
+      <li>
+        Current path: <strong>{{ route.value.fullPath }}</strong>
+      </li>
+      <li>
+        Theme from app loader: <strong>{{ theme }}</strong>
+      </li>
+    </ul>
+    <p>
+      Navigate to the <RouterLink to="/jsx">JSX example</RouterLink> or back to the
+      <RouterLink to="/">h() example</RouterLink>.
+    </p>
+  </section>
+</template>

package/templates/default/app/utils/.gitkeep

@@ -0,0 +1 @@
+

package/templates/default/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "phial dev",
+    "build": "phial build",
+    "prepare": "phial prepare",
+    "start": "phial start",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@hornjs/fest": "^0.0.4",
+    "phial": "{{phialVersion}}",
+    "h3": "^1.15.0",
+    "vue": "^3.5.30",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.11.0",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0",
+    "vue-tsc": "^3.2.5"
+  }
+}

package/templates/default/phial.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "phial/vite-plugin";
+
+export default defineConfig({
+  server: {
+    middleware: ["server-trace"],
+  },
+  dev: {
+    port: 3000,
+  },
+});

package/templates/default/public/.gitkeep

@@ -0,0 +1 @@
+

package/templates/default/server/context.ts

@@ -0,0 +1,3 @@
+import { createContextKey } from "@hornjs/fest/utils";
+
+export const serverTraceKey = createContextKey<string[]>([]);

package/templates/default/server/middleware/server-trace-route.ts

@@ -0,0 +1,13 @@
+import type { ServerMiddleware } from "@hornjs/fest";
+import { serverTraceKey } from "../context";
+
+const serverTraceRoute: ServerMiddleware = async (request, next) => {
+  const url = new URL(request.url);
+  const trace = request.context.get(serverTraceKey);
+  const nextTrace = [...trace, `route:${url.pathname}:${request.method}`];
+
+  request.context.set(serverTraceKey, nextTrace);
+  return next(request);
+};
+
+export default serverTraceRoute;

package/templates/default/server/middleware/server-trace-scope.ts

@@ -0,0 +1,13 @@
+import type { ServerMiddleware } from "@hornjs/fest";
+import { serverTraceKey } from "../context";
+
+const serverTraceScope: ServerMiddleware = async (request, next) => {
+  const url = new URL(request.url);
+  const trace = request.context.get(serverTraceKey);
+  const nextTrace = [...trace, `directory:${url.pathname}:${request.method}`];
+
+  request.context.set(serverTraceKey, nextTrace);
+  return next(request);
+};
+
+export default serverTraceScope;

package/templates/default/server/middleware/server-trace.ts

@@ -0,0 +1,13 @@
+import type { ServerMiddleware } from "@hornjs/fest";
+import { serverTraceKey } from "../context";
+
+const serverTrace: ServerMiddleware = async (request, next) => {
+  const url = new URL(request.url);
+  const trace = request.context.get(serverTraceKey);
+  const nextTrace = [...trace, `global:${url.pathname}:${request.method}`];
+
+  request.context.set(serverTraceKey, nextTrace);
+  return next(request);
+};
+
+export default serverTrace;

package/templates/default/server/routes/api/_middleware.ts

@@ -0,0 +1 @@
+export default ["server-trace-scope"];

package/templates/default/server/routes/api/ping.ts

@@ -0,0 +1,31 @@
+import type { ServerRequest } from "@hornjs/fest";
+import { serverTraceKey } from "../../context";
+
+export default {
+  middleware: ["server-trace-route"],
+  meta: {
+    kind: "api",
+  },
+  GET(request: ServerRequest) {
+    const { searchParams } = new URL(request.url);
+    const trace = request.context.get(serverTraceKey);
+
+    return {
+      ok: true,
+      method: "GET",
+      query: searchParams.get("message") ?? null,
+      trace,
+    };
+  },
+  async POST(request: ServerRequest) {
+    const trace = request.context.get(serverTraceKey);
+    const body = await request.text();
+
+    return {
+      ok: true,
+      method: "POST",
+      body: body || null,
+      trace,
+    };
+  },
+};

package/templates/default/server/routes/robots.txt.ts

@@ -0,0 +1,9 @@
+export default {
+  GET() {
+    return new Response("User-agent: *\nAllow: /\n", {
+      headers: {
+        "content-type": "text/plain; charset=utf-8",
+      },
+    });
+  },
+};

package/templates/default/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": ["node", "vite/client"]
+  },
+  "include": [
+    "app/**/*.ts",
+    "app/**/*.tsx",
+    "app/**/*.vue",
+    "server/**/*.ts",
+    ".phial/types/**/*.d.ts",
+    "phial.config.ts"
+  ],
+  "exclude": ["node_modules", ".output", "dist"]
+}