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: