With the new version 9 of the Firebase JS SDK, Google drastically changed how you use the Firebase library within your app.
The new modular API surface is designed to facilitate tree-shaking (removal of unused code) to make your web app as small and fast as possible. Read more about all the changes and benefits in their “Upgrade from version 8 to the modular Web SDK” article.
In this article, we will set up a new Nuxt.js project with Firebase 9 using the newly introduced modular library and write & read from Firestore as an example use case. All, while keeping the server-side rendering capabilities that come with the amazing Universal SSR mode of Nuxt.js.
If you want to learn how to integrate earlier versions of Firebase into your Nux app, make sure to read this article or use the nuxt/firebase module.
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!
