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

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:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.