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?

[josh-hemphill]

Yeah, if I used its onRoutesGenerated and created a copy of a route for each of its alias, and pushed it onto the returned routes array, the additional html files got created.

I mean it was all running under vite-ssg, but the vite-plugin-pages onRoutesGenerated function is definitely how I drove the creation of the additional file outputs. I'm running unplugin-vue-router under vite-ssg, I just don't see a way to create the duplicated routes.

[josh-hemphill]

We mostly used it to create html files for our catchall components that otherwise wouldn't get a file created for them.

[josh-hemphill]

I have a template project where I have it set up to do that (I haven't gotten around to updating it with more recent stuff, but that part is still accurate.) Looking back I forgot I used it to create html files that had different languages preloaded, just by changing the route meta language properties.
josh-hemphill/vitesse-vuetify-ssg
So I guess my question was a little mis-stated, all I need is to modify the base routes list.

[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