CODEWITHSUNDEEP
firebasegoogle-cloud-functionsnuxt.js
Matthew Keller
Matthew Keller

Reputation: 463

Using Firebase Functions with Nuxt 3

Environment

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

Upvotes: 6

Views: 3627

Answers (1)

Alex
Alex

Reputation: 854

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.

Upvotes: 1

Related Questions