Firebase 9 & Nuxt.js 🔥

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!

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: firebase-beta-9-nuxt
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: None
? Linting tools: None
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: None
? What is your GitHub username? lupas
? Version control system: Git

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 ⏭