Prerendering for SEO

If you want to prerender routes that will not significantly change once pushed to production, use this Webpack plugin: prerender-spa-plugin, which has been tested for use with Vue. For pages that do frequently change, Prerender.io and Netlify both offer plans for regularly re-prerendering your content for search engines.

Using prerender-spa-plugin

1. Install it as a dev dependency:

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

1. Require it in build/webpack.production.js:

// This line should go at the top of the file where other 'imports' live in
var PrerenderSpaPlugin = require('prerender-spa-plugin');

1. Configure it in the plugins array (also in build/webpack.production.js):

new PrerenderSpaPlugin(
  // Path to compiled app
  path.join(__dirname, '../dist'),
  // List of endpoints you wish to prerender
  [ '/' ]
)

If you also wanted to prerender /about and /contact, then that array would be [ '/', '/about', '/contact' ].

1. Enable history mode for vue-router:

   const router = new VueRouter({
   mode: 'history',
   routes: [...]
   })