vue-cli-plugin-prerender-spa

Add prerender-spa-plugin into your Vue application with zero configuration.


Looking for a co-maintainer: I'm continuing to maintain this project, hoever
I still would like help on some of the issues, and generally to help me keep this
plugin going as it's getting more and more popular. If you think you can help,
file and issue for maintainship!

Support requests: Vue has a Discord server and I often lurk in there. And
while there is a support label in the Issues, GitHub isn't the place for support
requests and should be directed to me in the
Vue Land Discord server.

Install

Add prerendering to your Vue application with:

``bash
vue add prerender-spa
`

or by searching for prerender-spa in the Vue UI plugins.

You'll be asked a few questions, detailed below, to which the default answers
are the most common options.

The main option to fit to your needs is the list of routes to pre-render.
Specify them as a comma-separated list:

`bash
? Which routes to pre-render? (list them separated by a comma) /,/about,/contact
`

Options list

$3

`bash
? Which routes to pre-render? (list them separated by a comma) /
`

Specify a list of routes to pre-render. By default only the index page is pre-
rendered, which should cover most SPAs. If your project uses vue-router, you
can specify a list of routes that do not depend on dynamic content (like user
uploaded data, public profiles, etc.). For example you can add your about page
as well as a contact page - those will load faster, and will be indexed by bots
who do not execute JavaScript, improving Search Engines rankings.

Note that if you want to also pre-render user generated content, you _will_
have to switch to Server-Side Rendering, there are no other options.

#### What it does to your project

The list of routes is split into an array and passed into the Webpack plugin.
The routes aren't checked for existence or even duplicates, just split into an
array and sent to the PrerenderSPAPlugin instance.

$3

`bash
? Use a render event to trigger the snapshot? Yes
`

Use a document event to signal prerender-spa-plugin to trigger a snapshot of
the DOM and save it. By default the renderer waits until DOMContentLoaded to
take a snapshot of the DOM. But it is still recommended that you control the
snapshot trigger - no surprise waiting for hours for your build before
realizing what's happening.

#### What it does to your project

When enabling the event-based snapshot trigger, it will tell
PrerenderSPAPlugin to listen for an x-app-rendered event. Your main file
is then modified to add a mounted() hook where the event will fire. Note that
it doesn't check if the hook is already present, nor does it parses the file;
it just looks for the line starting with render: (minus whitespaces) and
inserts the mounted() hook below. If you already have the hook set up, or if
your render() function on the main file is longer than one line, it will break
your Vue entrypoint. A better injection routine is planned, but for now, it
covers a vast majority of projects where the main file isn't touched.

$3

`bash
? Use a headless browser to render the application? (recommended) Yes
`

This option is there for debugging purposes, but should be left enabled
otherwise. Not using a headless browser will open a Chrome window when building
with your app running inside, then close once the snapshot has been taken.
Since the plugin configuration object isn't available, it is available here.

#### What it does to your project

The headless value of the configuration object is set to the answer to the
question.

$3

`bash
? Only use prerendering for production builds? (recommended) Yes
`

Only load the pre-rendering plugin when building for production. This is
strongly recommended as the plugin, spawning an instance of the Chrome browser,
adds significant time to the build process. Development builds should be snappy
and not memory-intensive; which is exactly what this plugin does to your build.

However, there may be cases where you want to test the pre-rendering itself,
and switching to a production build isn't the solution - you may then turn off
that option.

$3

#### Parallel / Mutli-threaded

This option is configured from within the Vue CLI itself, but serves to a whole
host of plugins to determine whether to turn on parallel jobs / multi-threading.

This plugin uses it to tell prerender-spa-plugin to render pages concurrently
(meaning in parallel) or not by setting the maxConcurrentRoutes parameter to
either 1 or 4, if the build is respectively single-threaded or multi-threaded.

$3

After being invoked, the plugin saves a file named .prerender-spa.json in the
root directory of the project; where you can specify custom options for the
Puppeteer renderer. It will be merged, and its options will overwrite those set
by the plugin itself.

Other way to set custom configuration for the Puppeteer renderer is to use customRendererConfig
dictionary of possible Puppeteer launch options.

Example configuration of debugging your site with Chrome DevTools opened automatically:

`js
// vue.config.js

module.exports = {
pluginOptions: {
prerenderSpa: {
registry: undefined,
renderRoutes: [
'/',
'/about'
],
useRenderEvent: true,
onlyProduction: true,

headless: false, // <- this could also be inside the customRendererConfig
customRendererConfig:
{
args: ["--auto-open-devtools-for-tabs"]
}
}
}
}
`

$3

Pupeteer allows to postprocess the HTML after it's been snapshot, and the plugin
allows you to provide your own function if you need to.

Add a postProcess option into your vue.config.js file to provide a custom
post-processing function to run on every build.

Example configuration:

`js
// vue.config.js

module.exports = {
pluginOptions: {
prerenderSpa: {
registry: undefined,
renderRoutes: [
'/',
'/about'
],
useRenderEvent: true,
headless: true,
onlyProduction: true,
postProcess: route => {
// Defer scripts and tell Vue it's been server rendered to trigger hydration
route.html = route.html
.replace(/