Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
40 lines (29 sloc) 1.23 KB

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.prod.conf.js:
// This line should go at the top of the file where other 'imports' live in
const PrerenderSpaPlugin = require('prerender-spa-plugin')
  1. Configure it in the plugins array (also in build/webpack.prod.conf.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: [...]
})