VueFire

外观

Nuxt.js ​

VueFire 带有一个官方的 Nuxt 模块，它会自动处理在 Nuxt 项目中设置 VueFire 的大部分繁琐工作。

安装 ​

bash
npm install firebase
npx nuxi@latest module add vuefire

此外，如果您使用的是 SSR，您需要安装 firebase-admin 及其对等依赖项

sh
pnpm install firebase-admin firebase-functions @firebase/app-types
sh
yarn add firebase-admin firebase-functions @firebase/app-types
sh
npm install firebase-admin firebase-functions @firebase/app-types

提示

根据您的需求，您可能需要或不需要设置 SSR。项目的最终复杂度会有很大不同。如果您想要一个入门项目，请查看现有的模板

配置 ​

接下来，将 nuxt-vuefire 添加到 nuxt.config.js 的 modules 部分，并使用您在项目概述（https://console.firebase.google.com/project/YOUR_PROJECT_NAME/overview) 中的应用设置中创建的凭据对其进行配置。您可以在 Firebase 文档 中找到更多详细信息。它应该看起来像这样

ts
export default defineNuxtConfig({
  modules: [
    // ... other modules
    'nuxt-vuefire',
  ],

  vuefire: {
    config: {
      apiKey: '...',
      authDomain: '...',
      projectId: '...',
      appId: '...',
      // there could be other properties depending on the project
    },
  },
})

配置 Admin SDK ​

如果您使用的是带有任何身份验证相关功能的 SSR，您需要创建一个 服务帐户，并在 .env 文件中将其内容作为名为 GOOGLE_APPLICATION_CREDENTIALS 的环境变量提供。

在本地开发中，将 service-account.json 文件放在其他文件旁边，并在环境变量中引用其路径会更方便

txt
GOOGLE_APPLICATION_CREDENTIALS=service-account.json

提示

此服务帐户文件包含敏感信息，不应提交到您的存储库。确保将其从您的版本控制系统中排除

sh
echo service-account.json >> .gitignore

其他配置 ​

如果您使用的是 身份验证 模块或 应用检查，请确保也启用它们

ts
export default defineNuxtConfig({
  // ...
  vuefire: {
    // ensures the auth module is enabled
    auth: {
      enabled: true
    },
    appCheck: {
      // Allows you to use a debug token in development
      debug: process.env.NODE_ENV !== 'production',
      isTokenAutoRefreshEnabled: true,
      provider: 'ReCaptchaV3',
      // Find the instructions in the Firebase documentation, link above
      key: '...',
    },
  },
})

自动导入 ​

Nuxt VueFire 会自动导入 vuefire 中最常用的函数，因此您甚至不需要在组件中导入它们 ✨。