Prerender Vue.js (vue cli) Pages With prerender-spa-plugin

October 29, 2019

prerender-spa-plugin is a webpack plugin to pre-render pre-defined pages.

NOTE: If you need server-side rendering, refer to Vue.js Server-Side Rendering Guide.

Install plugin

npm install --save-dev prerender-spa-plugin

NOTE: Using prerender-spa-plugin 3.4.0.

Edit vue.config.js.

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

module.exports = {
  configureWebpack:  {
    plugins: process.env.NODE_ENV === 'production' ? [
      new PrerenderSPAPlugin({
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, 'dist'),
        // Required - Routes to render.
        routes: [ '/', '/about', '/day/2019-10-18', '/card/qGNpbK3R7ne0siTNPTya'],
      })
    ] : []
  }
}

NOTE: If you have many dynamic routes, you would need to write a program to generate all possible routes.

Build

npm run build

Output at /dist directory.

NOTE: Launch a command line web server for testing.

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.