How do I set up Prerender.io with Nuxt.js 2?

TL;DR

Add Prerender.io to your Nuxt.js 2 project by installing the prerender-node package, registering it as Express middleware in nuxt.config.js, and pointing it at your Prerender.io token. The integration is straightforward and requires no changes to your frontend code. This guide covers Nuxt.js 2 only.

Step 1: Create a Prerender.io account.

Go to prerender.io and create your account if you do not have one already. Your account gives you access to your dashboard and your unique Prerender.io token.

Step 2: Copy your Prerender.io token.

Open your Prerender.io dashboard, navigate to Security and Access, then copy your Prerender.io token. You will need it in Step 5.

Step 3: Install the prerender-node package.

In your Nuxt.js 2 project root, run:

bash

npm install prerender-node --save

This adds the prerender-node integration as a dependency. View the source on GitHub.

Step 4: Add Prerender.io middleware to your nuxt.config.js file.

Open nuxt.config.js and add the serverMiddleware entry:

js

serverMiddleware: [   '~/prerender-middleware.js' ]

This tells Nuxt.js 2 to load your Prerender.io integration before each server-side request.

Step 5: Create the prerender-middleware.js file in your project root.

Create a file called prerender-middleware.js in your project root and add the following code, replacing YOUR_TOKEN with the token you copied in Step 2:

js

const express = require('express'); const app = express();  app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));  module.exports = {   path: '/',   handler: app };

This file registers Prerender.io as Express middleware and authenticates requests using your token.

Step 6: Verify your integration is working.

Before going further, confirm that Prerender.io is correctly intercepting crawler requests and serving rendered HTML.

➡️ Follow the verify your integration guide for step-by-step instructions.

Related articles

• How to verify your Prerender.io integration is working
• How do I integrate Prerender.io with Node.js and Express.js?
• How do I integrate Prerender with a Single Page Application?
• Available Prerender.io integrations