How to pre-render multiple Vue app pages?

Question

I'm trying (unsuccessfully) to pre-render the HTML of multiple Vue apps within the same project scaffolded with Vue CLI. I do not want to use Vue Router or Nuxt etc for multiple reasons.

I've tried using prerender-spa-plugin, but since I don't use routes, it only pre-renders the index.

My vue.config.js looks like this:

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

module.exports = {
  pages: {
    index: 'src/index.js',
    about: 'src/about.js',
  },
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/'],

        postProcess(route) {
          route.html = route.html.replace('</script><div>', '</script><div id="app" data-server-rendered="true">');

          return route;
        },

        renderer: new Renderer({
          headless: true,
          renderAfterDocumentEvent: 'render-event',
        }),
      }),
    ],
  },
};

and my index.js and about.js essentially look like this:

import Vue from 'vue';
import App from './Index.vue';

new Vue({
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'));
  },
}).$mount('#app');

I also have unique public/ index.html and about.html pages.

The routes parameter of prerender-spa-plugin doesn't seem to recognise things like '/about.html'. Is there an easy way of achieving multiple pre-rendered pages?

Do I have to wrestle with the SSR module?

Thanks in advance.

I wonder how does your spa knows what to serve if not told by Route? As per docs the route param takes multiple routes - my guess is you just leave the spa in any other path than / — Estradiaz
That's the thing, I don't want a SPA. I just want multiple pages within the same "application" that can be browsed to normally and share data as necessary. — Matt Stow
ah - i missed you are using pages option - maybe you are using only index.html as entry - try explicit: cli.vuejs.org/config/#pages -> dist/{filename}.html - just a guess cant test right now — Estradiaz
Unfortunately that doesn't work. If filename is omitted, then its inferred from the entry. Pages all work in dev mode, it's just trying to figure out how to pre-render it is the hard bit. I'm not sure the prerender plugin supports MPAs — Matt Stow
checking github.com/JoshTheDerf/prerenderer/… actually points to routes param not correct, rly weird.. — Estradiaz

Matt Stow Matt Stow · Accepted Answer · 2019-08-07T06:45:13

The solution I've found is to call new PrerenderSPAPlugin multiple times, one for each route.

How to pre-render multiple Vue app pages?

2 Answers