How to handle cache with wildcard subdomain proxy?

[maximelebreton]

Hi @dulnan, and thanks for your work on this missing feature in Nuxt (advanced cache, and manual purge)!

I have a Nuxt 4 project with a folder structure like:

- app
 - pages
   - @[slug].vue

The app runs in SSR mode.

My goal is to render and cache a wildcard subdomain, like this (and trigger on demand invalidation):
http://dulnan.localhost:3000 → render and cache page ~/pages/@[slug]

But Nuxt doesn't handle subdomains natively, so I had to find a way to do this.

After many failed attemps to proxy a route, I had some success with the Nuxt Router Options method like this:
router.options.ts

export default <RouterOptions>{
  routes: (_routes) => {
    const { ssrContext } = useNuxtApp();

    const subdomain = import.meta.server
    ? ssrContext?.event.context.subdomain as string ?? null
    : getClientSubdomain();

    if (subdomain) {

      const subdomainRoutes = [{
         component: () =>
          import("~/pages/@[slug].vue").then((r) => r.default || r),
          alias: `/@${subdomain}`,
          name: `index`,         
          path: '/',
          props: { subdomain }
      }];

      return subdomainRoutes;
    }

    return _routes;
  },
};

server/mutliCache.serverOptions.ts

import { defineMultiCacheOptions } from 'nuxt-multi-cache/server-options'
import fsDriver from 'unstorage/drivers/fs'

export default defineMultiCacheOptions(() => {
  return {
    route: {
      storage: {
        driver: fsDriver({
          base: '.nuxt/cache/page',
        }),
      },
      buildCacheKey(event) {
        const url = getRequestURL(event)
        console.log(url, "HEY")
        const path = url.pathname

        return path
      }
    }
  }
})

nuxt.config.ts

//...
multiCache: {
    debug: true,
    route: {
      enabled: true,
    }
  }
//...

With this method, when I go to http://dulnan.localhost:3000, the rendered page is ~/pages/@[slug] as index.html

But now I would like to cache this index.html page of each subdomain, and invalidate the subdomain's page cache on demand.
So I installed your plugin, but I'm facing to a problem...

I first tried to cache with component, but it's only cache the Vue component, and not the rendered html page.
Next I tried the route method, but your plugin seems to doesn't consider my case, nothing is cached as a route.

Because of my router.options.ts trick, this is not a route, not a component, not data, and can't be managed easily by CDN (I already tried to assign a cache-tag header, a Vary header, and never find a way to trigger accurate cache invalidation, because each CDN has his implementation and limitations, and it's a nightmaaaare...)

I hope you can help me to find out how to make it works with your plugin.

Thanks for your help :)