Firebase 9 & Nuxt.js 🔥

Pascal Luther
5 min readJun 14, 2021


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:

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



Pascal Luther

Cloud Product Architect by day, recreational web-developer by night. Currently a big fan of Vue & Nuxt.js and of going serverless with Google Firebase.