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": {…