To begin, we need to install the prerender spa plugin by Chris Fritz.

npm i prerender-spa-plugin

Now at the base of your project directory create the vue.config.js file.

The vue.config.js is an optional file that is used in the vue cli to configure things like webpack and additional plugins.

There are still a lot of outdated examples online showing how to enable the prerender plugin in the vue cli by modifying a webpack config file, but at the writing of this article all such modification now takes place inside vue.config.js.

Inside vue.config.js we will configure the prerender plugin to prerender the pages in our app.

Put the following code inside the vue.config.js.

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

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, 'dist'),
        // Required - Routes to render.
        routes: []
      })
    ]
  }
}

Now we need to specify inside the routes array which routes in our app we want prerendered.

The paths you specify in your routes.js file or wherever you’re using Vue Router, is what you will enter as values inside the routes array.

For the app that I was prerendering my vue.config.js ended up looking something like this.

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

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, 'dist'),
        // Required - Routes to render.
        routes: [
          '/',
          '/about',
          '/contact',
          '/binary-decimal-conversion',
          '/hexadecimal-decimal-conversion',
          '/hexadecimal-decimal-conversion',
          '/ieee-754-conversion',
          '/ones-and-twos-complement-conversion',
          '/binary-addition-conversion',
          '/binary-to-decimal-explanation',
          '/decimal-to-binary-explanation',
          '/decimal-to-hex-explanation',
          '/hex-to-decimal-explanation',
          '/ieee754-explanation',
          '/ones-complement-explanation',
          '/binary-addition-explanation',
          '/binary-practice-problems',
          '/hexadecimal-practice-problems',
          '/ieee-754-practice-problems',
          '/ones-and-twos-complement-practice-problems',
          '/binary-addition-practice-problems'
        ]
      })
    ]
  }
}

At this point everything should be configured properly, but to test that it is let’s rebuild the project.

npm run build

After it’s finished building open up the dist directory.

For every route in the routes array you should see a folder directory with its name.

If you expand these individual folders it shows an index.html that contains all the actual markup generated for these pages.

Mine looks like this.

I hope this was helpful to you. If anything was unclear feel free to reach out to me with any questions you have.

Subscribe