NUXTJS3(beta/rc):可以建立Firebase连接吗?

发布于 2025-02-10 05:55:39 字数 1953 浏览 0 评论 0原文

我目前正在使用VUE和TS实施NUXT 3项目的Firebase。

我确实设置了Firebase控制台内的所有内容,并成功地使用了项目本身的凭据登录
firebase登录,firebase init),

但是,如果我知道在/plugins/firebaseauth.client.ts下为firebase创建一个插件,并输入所需的信息等,我将无法建立一个连接我的项目。

至少我没有收到控制台内部的任何反馈,我既没有看到错误或已记录的firebase对象。我想念什么吗?

我试图将.ENV用于变量,也是直接字符串。

firebaseauth.client.ts

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()

    const firebaseConfig = {
        apiKey: 'xxxxxxx',
        authDomain: 'xxxxxxxx',
        projectId: 'xxxxxxxx',
        storageBucket: 'xxxxxx',
        messagingSenderId: 'xxxxxx',
        appId: 'xxxx',
        measurementId: 'xxxx',
    }

    // Initialize Firebase
    const app = initializeApp(firebaseConfig)
    console.log(app, 'APP')
})


nuxt.config.js

import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    dev: process.env.NODE_ENV !== 'production',
    build: {
        transpile: ['vueuc'], // fix dev error: Cannot find module 'vueuc'
        quiet: true,
    },
    vite: {
        plugins: [
            Components({
                resolvers: [NaiveUiResolver()], // Automatically register all components in the *components* directory
            }),
        ],
        // @ts-expect-error: Missing ssr key
        ssr: {
            noExternal: ['moment', 'naive-ui', '@juggle/resize-observer', '@css-render/vue3-ssr'],
        },
    },
    runtimeConfig: {
        firebaseApiKey: '',
        firebaseAuthDomain: '',
        firebaseProjectId: '',
        firebaseStorageBucket: '',
        firebaseMsgId: '',
        firebaseAppId: '',
        firebaseMeasurementId: '',
    },
})

I am currently implementing Firebase to my NUXT 3 Project with VUE and TS.

I did set everything up inside my firebase console and successfully logged in with my credentials inside the project itself

(firebase login, firebase init)

However, if I know create a plugin for Firebase under /plugins/firebaseAuth.client.ts and enter needed information and more, I am not able to establish a connection to my project.

At least I'm not receiving any feedback inside the console, I neither see an error or the logged Firebase object. Did I miss something?

I tried to use my .env for the variables and as direct string too.

firebaseAuth.client.ts

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()

    const firebaseConfig = {
        apiKey: 'xxxxxxx',
        authDomain: 'xxxxxxxx',
        projectId: 'xxxxxxxx',
        storageBucket: 'xxxxxx',
        messagingSenderId: 'xxxxxx',
        appId: 'xxxx',
        measurementId: 'xxxx',
    }

    // Initialize Firebase
    const app = initializeApp(firebaseConfig)
    console.log(app, 'APP')
})


nuxt.config.js

import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    dev: process.env.NODE_ENV !== 'production',
    build: {
        transpile: ['vueuc'], // fix dev error: Cannot find module 'vueuc'
        quiet: true,
    },
    vite: {
        plugins: [
            Components({
                resolvers: [NaiveUiResolver()], // Automatically register all components in the *components* directory
            }),
        ],
        // @ts-expect-error: Missing ssr key
        ssr: {
            noExternal: ['moment', 'naive-ui', '@juggle/resize-observer', '@css-render/vue3-ssr'],
        },
    },
    runtimeConfig: {
        firebaseApiKey: '',
        firebaseAuthDomain: '',
        firebaseProjectId: '',
        firebaseStorageBucket: '',
        firebaseMsgId: '',
        firebaseAppId: '',
        firebaseMeasurementId: '',
    },
})

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文