upgrade to nitro 3

docs/.vitepress/config.ts

@@ -1,9 +1,9 @@
 import { fileURLToPath, URL } from 'node:url';
+import type { Plugin } from 'vite';
 import { defineConfig, UserConfig } from 'vitepress';
 import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons';
 import sidebar from './sidebar/index.ts';
-import nitro from '@analogjs/vite-plugin-nitro';
-import nitroConfig from '../nitro.config.ts';
+import { nitro } from 'nitro/vite';
 import snackPlayer from './markdown/snackPlayer.ts';
 import sandpackPlugin from './markdown/sandpack.ts';
 import examplePlugin from './markdown/example.ts';
@@ -28,6 +28,24 @@ const description = 'Beautiful & consistent icon toolkit made by the community.'
 
 const isDev = process.env.NODE_ENV !== 'production';
 
+/**
+ * Nitro's dev middleware assumes it owns the app: it answers every extensionless request and
+ * never falls through, so VitePress pages would 404. `_nitroHandled` is the flag it checks to
+ * skip a request. It is private, so re-check this when upgrading Nitro.
+ */
+const nitroApiOnly: Plugin = {
+  name: 'lucide:nitro-api-only',
+  apply: 'serve',
+  configureServer(server) {
+    server.middlewares.use((req, _res, next) => {
+      if (!req.url?.startsWith('/api/')) {
+        (req as typeof req & { _nitroHandled?: boolean })._nitroHandled = true;
+      }
+      next();
+    });
+  },
+};
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title,
@@ -52,6 +70,8 @@ export default defineConfig({
     },
   },
   vite: {
+    // Nitro defaults this to 'custom', which drops the HTML fallback VitePress relies on in dev.
+    appType: 'spa',
     resolve: {
       alias: [
         {
@@ -85,19 +105,8 @@ export default defineConfig({
       ],
     },
     plugins: [
-      isDev &&
-        nitro(
-          {
-            ssr: false,
-            sourceRoot: '.',
-          },
-          {
-            ...nitroConfig,
-            srcDir: '.',
-            routesDir: 'api',
-            scanDirs: ['.'],
-          },
-        ),
+      isDev && nitroApiOnly,
+      isDev && nitro(),
       groupIconVitePlugin(),
       llmstxt({
         ignoreFiles: [

docs/api/categories/index.get.ts

@@ -1,9 +1,9 @@
-import { eventHandler, setResponseHeader } from 'h3';
+import { defineHandler } from 'nitro/h3';
 import iconMetaData from '~/.vitepress/data/iconMetaData';
 
-export default eventHandler((event) => {
-  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
-  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+export default defineHandler((event) => {
+  event.res.headers.set('Cache-Control', 'public, max-age=86400');
+  event.res.headers.set('Access-Control-Allow-Origin', '*');
 
   return Object.fromEntries(
     Object.entries(iconMetaData).map(([name, { categories }]) => [name, categories]),

docs/api/figma/data.ts

@@ -1,4 +1,4 @@
-import { eventHandler, setResponseHeader } from 'h3';
+import { defineHandler } from 'nitro/h3';
 import iconNodes from '~/.vitepress/data/iconNodes/index.ts';
 import iconMetaData from '~/.vitepress/data/iconMetaData';
 import releaseMeta from '~/.vitepress/data/releaseMetaData.json';
@@ -32,9 +32,9 @@ const dataResponse = {
   categories,
 };
 
-export default eventHandler((event) => {
-  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
-  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+export default defineHandler((event) => {
+  event.res.headers.set('Cache-Control', 'public, max-age=86400');
+  event.res.headers.set('Access-Control-Allow-Origin', '*');
 
   return dataResponse;
 });

docs/api/gh-icon/[...data].get.tsx

@@ -1,4 +1,4 @@
-import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { defineHandler } from 'nitro/h3';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
 import React from 'react';
 import SvgPreview from '~/.vitepress/lib/SvgPreview/index.tsx';
@@ -6,7 +6,7 @@ import iconNodes from '~/.vitepress/data/iconNodes';
 import createLucideIcon from 'lucide-react/src/createLucideIcon';
 import Backdrop from '~/.vitepress/lib/SvgPreview/Backdrop.tsx';
 
-export default eventHandler((event) => {
+export default defineHandler((event) => {
   const { params } = event.context;
 
   const pathData = params.data.split('/');
@@ -46,8 +46,8 @@ export default eventHandler((event) => {
     );
   }
 
-  defaultContentType(event, 'image/svg+xml');
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+  event.res.headers.set('Content-Type', 'image/svg+xml');
+  event.res.headers.set('Cache-Control', 'public,max-age=31536000');
 
   return renderToString(
     <SvgPreview

docs/api/gh-icon/diff/[...data].get.tsx

@@ -1,11 +1,11 @@
-import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { defineHandler } from 'nitro/h3';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
 import React from 'react';
 import Diff from '~/.vitepress/lib/SvgPreview/Diff.tsx';
 import iconNodes from '~/.vitepress/data/iconNodes';
 import createLucideIcon from 'lucide-react/src/createLucideIcon';
 
-export default eventHandler((event) => {
+export default defineHandler((event) => {
   const { params } = event.context;
 
   const pathData = params.data.split('/');
@@ -34,8 +34,8 @@ export default eventHandler((event) => {
         .replace(/<svg[^>]*>|<\/svg>/g, '')
     : '';
 
-  defaultContentType(event, 'image/svg+xml');
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+  event.res.headers.set('Content-Type', 'image/svg+xml');
+  event.res.headers.set('Cache-Control', 'public,max-age=31536000');
 
   return renderToString(
     <Diff

docs/api/gh-icon/dpi/[...data].get.ts

@@ -1,11 +1,11 @@
-import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { defineHandler } from 'nitro/h3';
 import iconNodes from '~/.vitepress/data/iconNodes';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import createLucideIcon from 'lucide-react/src/createLucideIcon';
 import sharp from 'sharp';
 
-export default eventHandler(async (event) => {
+export default defineHandler(async (event) => {
   const { params = {} } = event.context;
   const imageSize = 96;
   const name = params.data.split('/').at(-3);
@@ -42,8 +42,8 @@ export default eventHandler(async (event) => {
 
   const pngBuffer = await sharp(Buffer.from(svg)).png().toBuffer();
 
-  defaultContentType(event, 'image/svg+xml');
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+  event.res.headers.set('Content-Type', 'image/svg+xml');
+  event.res.headers.set('Cache-Control', 'public,max-age=31536000');
 
   return `
 <svg xmlns="http://www.w3.org/2000/svg" width="${imageSize}" height="${prevSvg ? imageSize * 2 : imageSize}" viewBox="0 0 ${imageSize} ${prevSvg ? imageSize * 2 : imageSize}">

docs/api/gh-icon/stroke-width/[...data].get.tsx

@@ -1,11 +1,11 @@
-import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { defineHandler } from 'nitro/h3';
 import { renderToString } from 'react-dom/server';
 import React from 'react';
 import Icon from 'lucide-react/src/Icon';
 import type { IconNode } from 'lucide-react/src/types';
 import { parseSync } from 'svgson';
 
-export default eventHandler((event) => {
+export default defineHandler((event) => {
   const { params } = event.context;
 
   const [strokeWidth, svgData] = params.data.split('/');
@@ -16,8 +16,8 @@ export default eventHandler((event) => {
     ({ name, attributes }) => [name, attributes],
   ) as IconNode;
 
-  defaultContentType(event, 'image/svg+xml');
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+  event.res.headers.set('Content-Type', 'image/svg+xml');
+  event.res.headers.set('Cache-Control', 'public,max-age=31536000');
 
   return renderToString(
     <Icon

docs/api/gh-icon/symmetry/[...data].get.tsx

@@ -1,9 +1,9 @@
-import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { defineHandler } from 'nitro/h3';
 import { renderToString } from 'react-dom/server';
 import React from 'react';
 import Diff from '~/.vitepress/lib/SvgPreview/Diff.tsx';
 
-export default eventHandler((event) => {
+export default defineHandler((event) => {
   const { params } = event.context;
 
   const pathData = params.data.split('/');
@@ -41,8 +41,8 @@ export default eventHandler((event) => {
     return '';
   }
 
-  defaultContentType(event, 'image/svg+xml');
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+  event.res.headers.set('Content-Type', 'image/svg+xml');
+  event.res.headers.set('Cache-Control', 'public,max-age=31536000');
 
   return renderToString(
     <Diff

docs/api/icon-nodes/index.get.ts

@@ -1,13 +1,13 @@
-import { eventHandler, getQuery, setResponseHeader } from 'h3';
+import { defineHandler, getQuery } from 'nitro/h3';
 import iconNodes from '~/.vitepress/data/iconNodes';
 
-export default eventHandler((event) => {
+export default defineHandler((event) => {
   const query = getQuery(event);
 
   const withUniqueKeys = query.withUniqueKeys === 'true';
 
-  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
-  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+  event.res.headers.set('Cache-Control', 'public, max-age=86400');
+  event.res.headers.set('Access-Control-Allow-Origin', '*');
 
   if (withUniqueKeys) {
     return iconNodes;

docs/api/icons/[iconName].get.ts

@@ -1,21 +1,19 @@
-import { eventHandler, getQuery, setResponseHeader, createError } from 'h3';
+import { defineHandler, getQuery, HTTPError } from 'nitro/h3';
 import iconNodes from '~/.vitepress/data/iconNodes';
 import createLucideIcon from 'lucide-react/src/createLucideIcon';
 import { renderToString } from 'react-dom/server';
 import { createElement } from 'react';
 
-export default eventHandler((event) => {
+export default defineHandler((event) => {
   const { params } = event.context;
 
   const iconNode = iconNodes[params.iconName];
 
   if (iconNode == null) {
-    const error = createError({
-      statusCode: 404,
+    throw new HTTPError({
+      status: 404,
       message: `Icon "${params.iconName}" not found`,
     });
-
-    return sendError(event, error);
   }
 
   const query = getQuery<Record<string, string | undefined>>(event);
@@ -39,9 +37,9 @@ export default eventHandler((event) => {
     ),
   ).toString('utf8');
 
-  defaultContentType(event, 'image/svg+xml');
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
-  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+  event.res.headers.set('Content-Type', 'image/svg+xml');
+  event.res.headers.set('Cache-Control', 'public,max-age=31536000');
+  event.res.headers.set('Access-Control-Allow-Origin', '*');
 
   return svg;
 });

docs/api/lab/icon-details/index.get.ts

@@ -1,10 +1,10 @@
-import { eventHandler, setResponseHeader } from 'h3';
+import { defineHandler } from 'nitro/h3';
 import iconMetaData from '~/.vitepress/data/lab/iconMetaData';
 import iconPopularity from '~/.vitepress/data/lab/iconPopularity';
 import iconNodes from '~/.vitepress/data/lab/iconNodes';
 
-export default eventHandler((event) => {
-  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+export default defineHandler((event) => {
+  event.res.headers.set('Access-Control-Allow-Origin', '*');
 
   return Object.fromEntries(
     Object.entries(iconMetaData).map(([iconName, iconData]) => {

docs/api/lab/icon-metadata/index.get.ts

@@ -1,9 +1,9 @@
-import { eventHandler, setResponseHeader } from 'h3';
+import { defineHandler } from 'nitro/h3';
 import iconMetaData from '~/.vitepress/data/lab/iconMetaData';
 
-export default eventHandler((event) => {
-  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
-  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+export default defineHandler((event) => {
+  event.res.headers.set('Cache-Control', 'public, max-age=86400');
+  event.res.headers.set('Access-Control-Allow-Origin', '*');
 
   for (const iconDetail in iconMetaData) {
     // Remove $schema from the response

docs/api/lab/icon-nodes/index.get.ts

@@ -1,14 +1,14 @@
-import { eventHandler, getQuery, setResponseHeader } from 'h3';
+import { defineHandler, getQuery } from 'nitro/h3';
 import iconNodes from '~/.vitepress/data/lab/iconNodes';
 type IconNodeWithKeys = [elementName: string, attrs: Record<string, string> & { key?: string }][];
 
-export default eventHandler((event) => {
+export default defineHandler((event) => {
   const query = getQuery(event);
 
   const withUniqueKeys = query.withUniqueKeys === 'true';
 
-  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
-  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+  event.res.headers.set('Cache-Control', 'public, max-age=86400');
+  event.res.headers.set('Access-Control-Allow-Origin', '*');
 
   if (withUniqueKeys) {
     return iconNodes;

docs/api/tags/index.get.ts

@@ -1,9 +1,9 @@
-import { eventHandler, setResponseHeader } from 'h3';
+import { defineHandler } from 'nitro/h3';
 import iconMetaData from '~/.vitepress/data/iconMetaData';
 
-export default eventHandler((event) => {
-  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
-  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+export default defineHandler((event) => {
+  event.res.headers.set('Cache-Control', 'public, max-age=86400');
+  event.res.headers.set('Access-Control-Allow-Origin', '*');
 
   return Object.fromEntries(Object.entries(iconMetaData).map(([name, { tags }]) => [name, tags]));
 });

docs/nitro.config.ts

@@ -1,20 +1,8 @@
-import { defineNitroConfig } from 'nitropack/config';
+import { defineConfig } from 'nitro';
 
-export default defineNitroConfig({
+export default defineConfig({
   compatibilityDate: '2026-02-26',
   preset: 'vercel',
-  // srcDir: '.',
-  apiDir: 'api',
-  // noPublicDir: true,
-  srcDir: '.',
+  serverDir: './',
   ignore: ['.vitepress/plugins'],
-  routeRules: {
-    '/api/**': { cors: false },
-  },
-  esbuild: {
-    options: {
-      jsxFactory: 'React.createElement',
-      jsxFragment: 'React.Fragment',
-    },
-  },
 });

docs/package.json

@@ -21,9 +21,8 @@
     "prebuild:writeLabIconNodes": "node ./scripts/writeLabIconNodes.mts",
     "prebuild:writeLabIconMetaIndex": "node ./scripts/writeLabIconMetaIndex.mts",
     "postbuild:vercelJson": "node ./scripts/writeVercelOutput.mts",
-    "dev:api": "nitropack dev",
-    "prebuild:api": "nitropack prepare",
-    "build:api": "NODE_OPTIONS=--max-old-space-size=8192 nitropack build",
+    "dev:api": "nitro dev",
+    "build:api": "NODE_OPTIONS=--max-old-space-size=8192 nitro build",
     "build": "pnpm run /^prebuild:.*/ && pnpm run build:api && pnpm run build:docs && pnpm postbuild:vercelJson",
     "preview": "node .output/server/index.mjs",
     "typecheck": "vue-tsc --noEmit"
@@ -38,10 +37,9 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/semver": "^7.8.0",
-    "h3": "^1.15.11",
     "markdown-it": "^15.0.3",
     "markdown-it-container": "^4.0.0",
-    "nitropack": "^2.13.5",
+    "nitro": "3.0.261103-rc",
     "rollup-plugin-copy": "^3.5.0",
     "semver": "^7.8.5",
     "sharp": "^0.35.5",
@@ -58,7 +56,6 @@
     "vue-tsc": "^3.3.11"
   },
   "dependencies": {
-    "@analogjs/vite-plugin-nitro": "^2.6.3",
     "@floating-ui/vue": "^2.0.1",
     "@headlessui/vue": "^1.7.23",
     "@lucide/vue": "workspace:*",

docs/tsconfig.json

@@ -1,6 +1,12 @@
 {
-  "extends": "./.nitro/types/tsconfig.json",
   "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": false,
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "jsxFactory": "React.createElement",
     "jsxFragmentFactory": "React.Fragment",