nested router - doesnt work

Environment

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-27460146.2ad93eb
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-zvowq4-gj7iuh?file=pages/index.vue

Describe the bug

with latest version of nuxt 3 and follow the documentation i cant create nested route when i’m trying to get data from api i get error:

handle is not a function
  at eval (file://./node_modules/h3/dist/index.mjs:57:24)  
  at new Promise (<anonymous>)  
  at callHandle (file://./node_modules/h3/dist/index.mjs:54:10)  
  at eval (file://./node_modules/h3/dist/index.mjs:50:12)  
  at eval (file://./node_modules/h3/dist/index.mjs:78:34)  
  at async handle (file://./node_modules/h3/dist/index.mjs:318:19)  
  at async ufetch (file://./node_modules/unenv/runtime/fetch/index.mjs:22:17)  
  at async $fetchRaw2 (file://./node_modules/ohmyfetch/dist/chunks/fetch.mjs:144:20)  
  at async setup (file://./.nuxt/dist/server/server.mjs:2442:176)
[Vue Router warn]: No match found for location with path "/test"

Additional context

No response

Logs

No response

[danielroe]

For now, you can workaround this with:

import { createRouter, useBase } from 'h3';

const router = createRouter();

router.get('/', () => 'Hello World');

export default useBase('/api/test', router.handler);

[Aareksio]

@ahku As of right now you can not. The handler is working only for the file-system path no matter if you use useBase or not. Currently defining programmatic routes is not possible this way. The only mean I am aware of to programmatically define routes is by using server middleware and handling req / res yourself.

// @/server/middleware/api.ts -- arbitrary file name inside /server/middleware

import { createRouter, defineEventHandler, useBase } from 'h3';

const router = createRouter();
router.get('/hello', defineEventHandler(event => 'Hello'));
router.get('/hello/world', defineEventHandler(event => 'Hello World'));
const handler = useBase('/api', router.handler);

export default (req, res, next) => {
  if (!req.originalUrl.startsWith('/api')) {
    return next();
  }

  return handler(req, res);
}

---

Edit, scratch that. @danielroe code is perfectly fine, but you must use catch-all:

// @/server/api/[...].ts -- catch-all route

import { createRouter, defineEventHandler, useBase } from 'h3';

const router = createRouter();
router.get('/hello', defineEventHandler(event => 'Hello'));
router.get('/hello/world', defineEventHandler(event => 'Hello World'));

export default useBase('/api', router.handler);

---

Edit 2, you can not use root (/) path in nested router when using catch-all ([...].ts) 😅