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 npmAfter 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 ⏭
