Server Side Render Nuxt App Using Firebase

The Problem

If you use Firebase and Vue for your web applications, you just deploy the site with bunch of JavaScript and Search Engines will not see most of data on the page!

The Solution

Server Side Rendering

IMPORTANT

Firebase only supports Node Engine 8 or 6. So before starting please ensure that you are using Node 8 on your local machine if not then use nvm.

coreybutler/nvm-windows

Step 1

Get the code

git clone https://github.com/lambrohan/nuxt-firebase-ssr-starter.git

All the Nuxt files are inside /src folder and server-side stuff in /prod folder. Thanks to David Royer’s repository I saved a lot of time.

Step 2

Open .setup-firebaserc file and enter your firebase project id and run following command in root directory (nuxt-firebase-ssr-starter).

yarn setup

Step 3

Once setup is done you can use regular Nuxt commands to to run, build or generate application. (you can run these commands from root directory itself)

Let's build our app

yarn build       // this will build app into root/prod/server/nuxt

After building the project all the static assets will be copied to the client folder so that when deployed these assets will be served by Firebase’s CDN’s.

Let’s run the app

To test the setup, we need to host the project and serve the function locally.

yarn serve

This will spin up a server which will host our app and then we can test locally before deploying it to firebase.

Yay! We now have a fully server side rendered Nuxt app.

Check out David Royer’s repo for more info.

davidroyer/nuxt-ssr-firebase