nitrojs · gioboa · Oct 7, 2025
diff --git a/examples/qwik/package.json b/examples/qwik/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "nitro-vite-qwik-spa",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite build && serve dist",
+    "qwik": "qwik"
+  },
+  "devDependencies": {
+    "@qwik.dev/core": "2.0.0-beta.11",
+    "nitro": "npm:nitro-nightly",
+    "serve": "14.2.5",
+    "typescript": "5.9.3",
+    "vite-plugin-static-copy": "3.1.3",
+    "vite-tsconfig-paths": "5.1.4",
+    "vite": "7.1.9"
+  }
+}
diff --git a/examples/qwik/src/client.tsx b/examples/qwik/src/client.tsx
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+export { render, jsx } from "@qwik.dev/core";
diff --git a/examples/qwik/src/global.css b/examples/qwik/src/global.css
diff --git a/examples/qwik/src/root.tsx b/examples/qwik/src/root.tsx
@@ -0,0 +1,20 @@
+import { component$, useSignal } from "@qwik.dev/core";
+
+import "./global.css";
+
+export default component$(() => {
+  const counterSig = useSignal(0);
+
+  return (
+    <div>
+      <h1>Hello from Qwik!</h1>
+      <button
+        onClick$={() => {
+          counterSig.value += 1;
+        }}
+      >
+        {counterSig.value}
+      </button>
+    </div>
+  );
+});
diff --git a/examples/qwik/src/server.tsx b/examples/qwik/src/server.tsx
@@ -0,0 +1,39 @@
+/// <reference types="vite/client" />
+import { render, jsx } from "@qwik.dev/core";
+import root from "./root";
+
+export default {
+  async fetch(req: Request): Promise<Response> {
+    return new Response(indexHTML(), {
+      headers: {
+        "Content-Type": "text/html",
+      },
+    });
+  },
+};
+
+function indexHTML() {
+  return /* html */ `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Nitro + Qwik</title>
+
+    <script async type="module" src="@qwik.dev/core/qwikloader.js">
+      // ^ This is the QwikLoader, it's required for Qwik to work
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">
+      import { render, jsx } from "./src/client";
+      import Root from "./src/root";
+
+      /** This renders your application */
+      render(document.querySelector("#root"), jsx(Root));
+    </script>
+  </body>
+</html>
+`;
+}
diff --git a/examples/qwik/tsconfig.json b/examples/qwik/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "ES2020",
+    "module": "ES2022",
+    "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@qwik.dev/core",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "outDir": "tmp",
+    "noEmit": true,
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+    /* if you do not use CSS modules, remove this line and delete the typescript-plugin-css-modules module from package.json */
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+  },
+  "include": ["src", "./*.d.ts", "./*.config.ts"]
+}
diff --git a/examples/qwik/vite.config.mts b/examples/qwik/vite.config.mts
@@ -0,0 +1,28 @@
+import { qwikVite } from "@qwik.dev/core/optimizer";
+import { defineConfig, type UserConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+import { nitro } from "nitro/vite";
+
+export default defineConfig((config): UserConfig => {
+  return {
+    plugins: [qwikVite({ csr: true }),
+    tsconfigPaths({ root: "." }),
+    config.mode === "development" &&
+    viteStaticCopy({
+      targets: [
+        {
+          src: "./node_modules/@qwik.dev/core/dist/qwikloader.js",
+          dest: "@qwik.dev/core",
+        },
+      ],
+    }), nitro()],
+    environments: {
+      client: {
+        build: { rollupOptions: { input: "./src/client.tsx" } },
+        consumer: "client",
+      },
+    },
+  }
+});
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="vite/client" />
		export { render, jsx } from "@qwik.dev/core";