How to control what HTML files are generated from routes?

[josh-hemphill]

I was migrating from vite-plugin-pages and the only thing I was missing was a way to turn my route alias into their own html files in the output so urls to alias pages will still work in prod.

[posva]

That sounds more like pre-rendering. Are you sure it was that plugin?

[posva]

So you are looking for a hook when routed are generated. This should be it:

unplugin-vue-router/src/options.ts

Line 133 in f18f572

beforeWriteFiles?: (rootRoute: EditableTreeNode) => _Awaitable<void>

[josh-hemphill]

Ah, I was experimenting with that and extendRoute, but was having trouble figuring out how to recreate what I was doing before. I thought beforeWriteFiles might be where I should reimplement my stuff, but wasn't sure.

Looking at the EditableTreeNode class, I don't see a way to rootNode.insert with the data available on the EditableTreeNode class I get when iterating over the children of the rootNode. rootNode.insert(path,filePath) assumes I have the file path, but that's not a property of the child nodes I have access to.

[posva]

what are you trying to add or change in the routes array? (your onRoutesGenerated is really big)

[josh-hemphill]

Sorry, that's an old one that gets really funky to do the internationalization.
This is what I've been using to just replace certain routes (e.g. [...all].vue) with a series of other routes/files:

viteConfigPlugins = [
  Pages({
    onRoutesGenerated(routes: RouteRecordRaw[]) {
      const alteredRouteList: RouteRecordRaw[] = [];
      for (const route of routes) {
        if (route?.meta?.isCatchAll) {
          const basePath = parseBasePath(route.path);
          // Adding any pages as a derivative of the catchall route object 
          alteredRouteList.push({...route, path: `${basePath}/error` });
          alteredRouteList.push({...route, path: `${basePath}/not-available` });
        }
        // I just keep the catchall route that doesn't get an html file for anything else that might reference it.
        alteredRouteList.push(route);
      }
      return alteredRouteList;
    }
  })
]

In my projects, I've been replacing the catchall routes with multiple error-specific pages, but I'm realizing I should probably just drop trying to have the error type statically prerendered and just stick the error type in the URL query parameters, I might be able to do that with just the current unplugin-vue-router functions.

[posva]

The idea of the EditableTreeNode is to allow overriding stuff too. You can do route.path = '/new-apath, route.addAlias(). It's still experimental and lacking some features like removing aliases and setting other options like props, so feel free to give feedback about missing features. You do have to implement the finding and replacing mechanism through a for (const node of tree) and node.delete() though