Deploy Nuxt 3 to Firebase Hosting

Firebase Hosting is a service offered by Firebase to deploy static websites. This means we wouldn't be able to deploy server-side Node.js websites generated with Nuxt.js unless we used some type of server-side engine. This is why we are going to be using Cloud Functions.

Nuxt 3 now supports the integration with Firebase and Cloud Functions out of the box requiring minimal configuration thanks to its new server engine called Nitro.

You will need to be in the Blaze plan for Firebase to use Cloud Functions.

By the way, if you're looking to manage this with a version control system like Git, make sure you check out GitKraken and use my referral code to win a chance to get a $100 Amazon gift card here: https://www.gitkraken.com/invite/c4SJ1sK3

Install Firebase CLI tools

npm install -g firebase-tools

Initialize Firebase Hosting in your Nuxt project

This step will allow us to set up what we want to deploy to Firebase Hosting.

firebase loginfirebase init hosting

When you run this command, make sure you establish .output/public as the public directory configured.

Then, go to your firebase.json file and add what is missing in order to enable Cloud Functions server side rendering:

{  "functions": { "source": ".output/server" },  "hosting": [    {      "site": "<your_project_id>",      "public": ".output/public",      "cleanUrls": true,      "rewrites": [{ "source": "**", "function": "server" }]    }  ]}

Now, go ahead and build your project using the command:

NITRO_PRESET=firebase npm run build

Finally, you can just deploy this to Firebase using the Firebase CLI tools.

firebase deploy