Использование функций Firebase с Nuxt 3

К сожалению, процедура, которой вы следуете, имеет некоторые моменты, на которые следует обратить внимание. Как упоминалось ранее в этом нить:

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>

Я также попытался воспроизвести проблему и успешно развернул функции на эмуляторе с тем же подходом, что и в вопросе, следуя документации GCP о том, как добавить Firebase для вашего проекта, и используя этот Учебник по ютубу в качестве руководства, в нем есть несколько важных советов по как добавить Firebase в проект NuxtJS.

Я оставлю пример того, как мой файл firebase.json выглядел после того, как все настройки были завершены:

{
  "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/**"
    ]
  }
}

Кроме того, я хотел бы предложить использовать Интерфейс командной строки Firebase, так как он имеет больше специальных возможностей, и проверить этот Средний гид, чтобы более подробно изучить, как добавить Firebase в Nuxt.