Table of Contents

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
  1. Login to your Firebase account by running the following command:
firebase login
  1. Add the following packages to your project if not already added:
npm install vuefire nuxt-vuefire firebase firebase-admin firebase-functions @firebase/app-types
  1. 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,
  }
})
  1. 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.
  1. 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
  2. Build your Nuxt 3 application by running the following command:
npm run build
  1. 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.

buy-me-a-coffee