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.

Too much time indoors, in front of the computer? Find an activity to do Outside at GeoQuestr.com

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.