Using Firebase Functions with Nuxt 3

Question

Environment

Operating System: macOS 10.15.7
Node Version:v16.14.2
Nuxt Version: 3.0.0-rc.2
Firebase: 9.7.0
firebase-admin: 10.2.0
firebase-functions: 3.21.0
firebase-functions-test: 0.3.3

In firebase.json the following config is set:

{
"functions": { "source": ".output/server" }
}

I have a file under the "server" directory containing the following function:

import * as functions from "firebase-functions";

export const helloWorld = functions.https.onRequest((request, response) => {
    functions.logger.info("Hello logs!", {structuredData: true});
    response.send("Hello from Firebase!");
});

When I run:

NITRO_PRESET=firebase npm run build
firebase emulators:start --only functions

then go to my firebase emulator log, it does not show the new helloWorld() function being initialized. Also, when going to "http://localhost:5001/$PROJECTNAME/us-central1/helloWorld", it returns "Function us-central1-helloWorld does not exist, valid functions are: us-central1-server" which suggests that my function has not been initialized.

Is there any way I can write firebase cloud functions in my Nuxt 3 app from files in my server directory?

I saw a similar discussion here that said it was possible to change the nuxt.config.ts functions object between deploying functions,storage,firestore and deploying server and hosting. I am trying to write firebase functions solely in the "server" directory without creating a "functions" directory and the root of my project. Is this possible?

I have also opened a discussion on GitHub here

Alex · Accepted Answer · 2022-05-10 21:54:18Z

1

Unfortunately, the procedure you are following has some points to highlight. As previously mentioned on this thread:

The Vue.js app is a front-end component (even if it is hosted in a cloud service like Firebase Hosting). The Cloud Functions are serverless back-end components, hosted in the Firebase (Google Cloud) infrastructure and reacting to events.

To get these two components interacting with each other there are basically two possibilities:

For Callable Cloud Functions and HTTPS Cloud Functions, you will call them from your Vue.js app.

For background triggered Cloud Functions (e.g. triggered by a Firestore event like doc creation), the Vue.js front-end could generate the event (e.g. write to Firestore) and/or listen to the result of a Cloud Function execution (e.g. a Firestore doc is modified).

…

As explained in the documentation, to call the Callable Function from your Vue.js app, you need to do as follows (with the JS SDK v9):

Add Firebase to your Vue.js app. For example via a firebaseConfig.js file:

   import { initializeApp } from "firebase/app";
   import { getFirestore } from "firebase/firestore";
   import { getFunctions } from "firebase/functions";
  
   const firebaseConfig = {
   apiKey: "...",
   // ....
   };
  
   const firebaseApp = initializeApp(firebaseConfig);
   const db = getFirestore(firebaseApp);
   const functions = getFunctions(firebaseApp);
  
   export { db, functions };

Then, in your component, you do

   <script>       
   import { functions } from '../firebaseConfig';
   import { httpsCallable } from 'firebase/functions';
  
   // ...
   methods: {
   async callFunction() {
   const addMessage = httpsCallable(functions, 'addMessage');
   const result = await addMessage({ text: messageText })
   const data = result.data;
   //...
   });
  
  }
  
   </script>

I also tried to reproduce the issue, and I successfully deployed the functions on the emulator with the same approach from the question, following the documentation from GCP on how to add Firebase to your project, and using this Youtube tutorial as a guide, it has some important tips on how to add Firebase to a NuxtJS project.

I will leave a sample on how my firebase.json file ended up looking once all the set-up was finished:

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": ".output/server" 
  },
  "hosting": {
    "site": "<your_project_id>",
      "public": ".output/public",
      "cleanUrls": true,
      "rewrites": [{ "source": "**", "function": "server" }],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Additionally, I would like to suggest using the Firebase CLI, as it has more accessibility features, and check this Medium guide to take a deeper look at how to add Firebase to Nuxt.

answered May 10, 2022 at 21:54

Alex

8844 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mises Over a year ago

He wants to use nuxt3 as external server. He wants to use libraries like firebase-functions SDK and firebase-admin SDK. Those libraries work in node environment.

Alex Over a year ago

Yes, all that is correct, and the answer talks about it too. Can you please elaborate? My answer is explaining how to deploy Cloud Functions using Nuxt 3 as front end and I was also able to apply the app through Nitro server

Mises Over a year ago

There's nothing to elaborate. Example you wrote works only as open API for everyone if we speak about video. He wants to be able to authenticate users and do things in database. He needs to use firebase-functions and firebase-admin SDK.

Alex Over a year ago

Yes, and that is possible. He just needs to follow my answer.

Alex Over a year ago

I don't think this is the main question of the user, but if you have something else to add you can post it as a comment or an answer.

|

Collectives™ on Stack Overflow

Using Firebase Functions with Nuxt 3

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related