Deploy a Nuxt 3 Application with Firebase Hosting

In this tutorial, you will learn how to deploy a Nuxt 3 SSR application with nuxt-vuefire to firebase hosting.

Prerequisites

• Familiarity with the command line
• Install Node.js version 18.0 or higher
• A Nuxt 3 application
• A Firebase account with firebase hosting enabled
• Blaze plan enabled on your firebase account

Setup

1. Install the Firebase CLI globally by running the following command in your terminal:

npm install -g firebase-tools

2. Login to your Firebase account by running the following command:

firebase login

3. Add the following packages to your project if not already added:

npm install vuefire nuxt-vuefire firebase firebase-admin firebase-functions @firebase/app-types

4. Add the required params for your nuxt.config.js file:

export default defineNuxtConfig({
  modules: [
    // ... other modules
    'nuxt-vuefire',
  ],
  vuefire: {
    config: {
      apiKey: '...',
      authDomain: '...',
      projectId: '...',
      appId: '...',
      // there could be other properties depending on the project
    },
  },
  
  nitro: {
    preset: firebase,
  }
})

5. Add your firebase config.

• create a file called firebase.json in the root of your project and add the following code:

{
  "hosting": [
    {
      "site": "your_project_name",
      "public": ".output/public",
      "cleanUrls": true,
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [{ "source": "**", "function": "server" }]
    }
  ],
  "functions": [
    {
      "source": ".output/server",
      "codebase": "default",
      "ignore": [".git", "firebase-debug.log", "firebase-debug.*.log"]
    }
  ]
}

• dont forget to replace the "site" with your correct project name.

6. Add which ever functionality you want from the nuxt-vuefire package. -Best is to go to the nuxt-vuefire documentation and follow the steps there. -https://vuefire.vuejs.org/nuxt/getting-started.html
7. Build your Nuxt 3 application by running the following command:

npm run build

8. Deploy your application by running the following command:

firebase-tools deploy

Thats it!

It couldn't get any easier than that, now you have a Nuxt 3 application deployed to firebase hosting. By using the nitro preset "firebase". It will detect that you have a SSR application and automatically set it up as a serverless function.

Did you like this tutorial?

You can support me, so that i can continue to make more tutorials like this one.