refactor(nuxt): wip

Author: posva

packages/nuxt/src/module.ts

@@ -69,18 +69,16 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
       nuxt.options.build.transpile.push(runtimeDir)
 
       nuxt.hook('modules:done', () => {
-        addPlugin(resolve(runtimeDir, 'plugin'))
-      })
+        // addPlugin(resolve(runtimeDir, 'plugin'))
 
-      // const p = normalize(resolve(templatesDir, 'plugin.js'))
-      // console.log('[VueFire]: adding', p)
-      // addPluginTemplate({
-      //   src: normalize(resolve(templatesDir, 'plugin.js')),
+        addPluginTemplate({
+          src: normalize(resolve(templatesDir, 'plugin.ejs')),
 
-      //   options: {
-      //     ...options,
-      //   },
-      // })
+          options: {
+            ...options,
+          },
+        })
+      })
     },
   })
 

packages/nuxt/src/runtime/plugin.ts

@@ -6,28 +6,33 @@ import { connectDatabaseEmulator, getDatabase } from 'firebase/database'
 
 export default defineNuxtPlugin((nuxtApp) => {
   // TODO: initialize firebase app from config
+  const appConfig = useAppConfig()
 
   console.log('initializing firebase app')
 
-  const firebaseApp = initializeApp({
-    // FIXME: hard coded until the templates are fixed in nuxt
-    apiKey: 'AIzaSyAkUKe36TPWL2eZTshgk-Xl4bY_R5SB97U',
-    authDomain: 'vue-fire-store.firebaseapp.com',
-    databaseURL: 'https://vue-fire-store.firebaseio.com',
-    projectId: 'vue-fire-store',
-    storageBucket: 'vue-fire-store.appspot.com',
-    messagingSenderId: '998674887640',
-    appId: '1:998674887640:web:1e2bb2cc3e5eb2fc3478ad',
-    measurementId: 'G-RL4BTWXKJ7',
-  })
+  const firebaseApp = initializeApp(appConfig.firebaseConfig)
 
   console.log('initialized app')
 
+  // TODO: if emulator
   // connectFirestoreEmulator(getFirestore(firebaseApp), 'localhost', 8080)
   // connectDatabaseEmulator(getDatabase(firebaseApp), 'localhost', 8081)
 
   nuxtApp.vueApp.use(VueFire, {
     firebaseApp,
+    modules: [
+      // TODO: conditionally add modules (template)
+      // VueFireAuth(),
+      // VueFireAppCheck({
+      //   // debug: process.env.NODE_ENV !== 'production',
+      //   isTokenAutoRefreshEnabled: true,
+      //   provider: new ReCaptchaV3Provider(
+      //     '6LfJ0vgiAAAAAHheQE7GQVdG_c9m8xipBESx_SKI'
+      //   ),
+      // }),
+      // VueFireDatabaseOptionsAPI(),
+      // VueFireFirestoreOptionsAPI(),
+    ],
   })
 
   if (process.server) {

packages/nuxt/templates/plugin.ejs

@@ -1,17 +1,49 @@
-// @ts-check import { usePendingPromises, VueFire, useSSRInitialState } from
-'vuefire' import { initializeApp } from 'firebase/app' import {
-defineNuxtPlugin, toRaw, useAppConfig, useRuntimeConfig } from '#imports' import
-{ connectFirestoreEmulator, getFirestore } from 'firebase/firestore' import {
-connectDatabaseEmulator, getDatabase } from 'firebase/database' export default
-defineNuxtPlugin((nuxtApp) => { const appConfig = useAppConfig() const
-firebaseConfig = toRaw(appConfig).firebaseConfig console.log('Initializing
-Firebase app...', firebaseConfig) const firebaseApp =
-initializeApp(firebaseConfig) console.log('initialized firebase app',
-!!firebaseApp) // connectFirestoreEmulator(getFirestore(firebaseApp),
-'localhost', 8080) // connectDatabaseEmulator(getDatabase(firebaseApp),
-'localhost', 8081) nuxtApp.vueApp.use(VueFire, { firebaseApp, services: [ <%
-if(options.services.auth) { %> // Auth <% } %> ] }) if (process.server) { //
-TODO: pass the firebaseApp nuxtApp.payload.vuefire =
-useSSRInitialState(undefined, firebaseApp) } else if (nuxtApp.payload?.vuefire)
-{ // hydrate the plugin state from nuxtApp.payload.vuefire
-useSSRInitialState(nuxtApp.payload.vuefire, firebaseApp) } return {} })
+import { usePendingPromises, VueFire, useSSRInitialState } from 'vuefire'
+import { initializeApp } from 'firebase/app'
+import {
+  defineNuxtPlugin,
+  useAppConfig,
+  useRuntimeConfig,
+} from '#app'
+import {
+  connectFirestoreEmulator,
+  getFirestore,
+} from 'firebase/firestore'
+import {
+connectDatabaseEmulator,
+getDatabase,
+} from 'firebase/database'
+import {
+  toRaw,
+} from 'vue-demi'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const appConfig = useAppConfig()
+  const firebaseConfig = toRaw(appConfig).firebaseConfig
+  console.log('Initializing Firebase app...', firebaseConfig)
+
+  const firebaseApp = initializeApp(firebaseConfig)
+  console.log('initialized firebase app', !!firebaseApp)
+
+  // connectFirestoreEmulator(getFirestore(firebaseApp), 'localhost', 8080)
+  // connectDatabaseEmulator(getDatabase(firebaseApp), 'localhost', 8081)
+
+  nuxtApp.vueApp.use(VueFire, {
+    firebaseApp,
+    services: [
+    <% if(options.services.auth) { %>
+      // Auth
+    <% } %>
+    ],
+  })
+
+  if (process.server) {
+    // TODO: pass the firebaseApp
+    nuxtApp.payload.vuefire = useSSRInitialState(undefined, firebaseApp)
+  } else if (nuxtApp.payload?.vuefire) {
+    // hydrate the plugin state from nuxtApp.payload.vuefire
+    useSSRInitialState(nuxtApp.payload.vuefire, firebaseApp)
+  }
+
+  return {}
+})