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.
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
? 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 ⏭