Nuxt.js (v2), Firestore & SSR 🔥

Pascal Luther
6 min readOct 31, 2018

This article will help you integrate Firebase Firestore into a Nuxt.js project while keeping the server-side rendering capabilities that come with the amazing Universal SSR mode of Nuxt.js.

And all of this without the need for any additional libraries other than Google’s own Firebase SDK.

❗️️️️️️❗️️️️️️ Update: If you like it even simpler: I wrote a small Nuxt module nuxt-fire (now @nuxtjs/firebase) that has made it to be an official nuxtjs module and makes integrating Firebase into your Nuxt 2.0 project even easier!
Check it out:
https://firebase.nuxtjs.org

❗️️ This article is based on Nuxt.js v2.x and might not be valid for older versions. For an article covering the same for Nuxt.js v1.x, check out the following article:
https://medium.com/@pascalluther/nuxt-js-v1-firestore-and-ssr-73e3140574fc

1) Install Nuxt.js

skip to section 2 if you already have a Nuxt.js project running

Follow the instructions on the link below to create a basic nuxt app:

https://github.com/nuxt/create-nuxt-app

npx create-nuxt-app <my-project>

❗️️ Make sure to replace “<project-name>” with your project-name!

You can choose which options you like yourself, but make sure to have rendering mode “universal” applied so it is a SSR project.

? Project name nuxt2-firestore
? Project description My ultimate Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal ❗️️❗️️❗️️
? Use axios module no
? Use eslint no
? Use prettier no
? Author name Pascal
? Choose a package manager npm

After following the installation instruction you should be able to run your project and see the following:

2) Install the Firebase SDK

skip to section 3 if you already have the Firebase SDK installed

--

--

Pascal Luther

Cloud Product Architect by day, recreational web-developer by night. Currently a big fan of Vue & Nuxt.js and of going serverless with Google Firebase.