NUXTJS3(beta/rc):可以建立Firebase连接吗?
我目前正在使用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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论