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: '',
},
})