Nuxt.js (v1), Firestore & SSR 🔥

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.

❗️️ NEWER ARTICLE! This article is based on Nuxt.js Version 1.x. If you are working with the newer Nuxt 2.0, check out this article:
https://medium.com/@pascalluther/nuxt-js-v2-firestore-ssr-938d8fb7d2b0

1) Install Nuxt.js

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

First, install the vue-cli if you haven’t already:

npm install -g @vue/cli @vue/cli-init

Then, for the sake of simplicity, install the Nuxt.js starter template with the following command:

vue init nuxt-community/starter-template <project-name>

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

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 ⏭

Now let’s install the Firebase SDK. Do this with the following command:

npm install firebase --save

This is all the dependencies you will need. In your packages.json file you should see the below:

"dependencies": {
  "firebase": "^5.4.2",
  "nuxt": "^1.0.0"
},

The starter template comes with Nuxt v.1.0.0. Change that to ^1.4.2 or higher and then run npm install to update to a more recent version, just for the sake of not using a rather old version.

❗️️️️ but don’t update to Nuxt 2+since this article doesn’t cover that

This article was written with the following two versions:

"dependencies": {…