refactor(nuxt): work locally with workaround vite

Author: posva

packages/nuxt/package.json

@@ -26,7 +26,7 @@
     "prepack": "nuxt-module-build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
+    "stub": "nuxt-module-build --stub"
   },
   "dependencies": {
     "@nuxt/kit": "^3.0.0"

packages/nuxt/playground/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

packages/nuxt/playground/nuxt.config.ts

@@ -1,6 +1,11 @@
 import { fileURLToPath } from 'node:url'
-import { defineNuxtConfig } from 'nuxt/config'
-import VueFire from '../'
+import { resolve } from 'node:path'
+import VueFire from 'nuxt-vuefire'
+
+// we need the root node modules where packages are hoisted
+const nodeModules = fileURLToPath(
+  new URL('../../../node_modules', import.meta.url)
+)
 
 export default defineNuxtConfig({
   app: {
@@ -9,8 +14,8 @@ export default defineNuxtConfig({
   },
 
   alias: {
+    // import the dev version directly
     vuefire: fileURLToPath(new URL('../../../src/index.ts', import.meta.url)),
-    'nuxt-vuefire': fileURLToPath(new URL('../src/module.ts', import.meta.url)),
   },
 
   modules: [
@@ -34,4 +39,27 @@ export default defineNuxtConfig({
       },
     ],
   ],
+
+  // NOTE: temporary workaround that cannot be put within the nuxt-vuefire module
+  hooks: {
+    // cannot be added in nuxt's resolve.alias
+    'vite:extendConfig': (config, { isServer }) => {
+      if (isServer) {
+        config.resolve ??= {}
+        config.resolve.alias ??= {}
+        // @ts-ignore
+        config.resolve.alias['firebase/firestore'] = resolve(
+          nodeModules,
+          'firebase/firestore/dist/index.mjs'
+        )
+        // @ts-ignore
+        config.resolve.alias['@firebase/firestore'] = resolve(
+          nodeModules,
+          '@firebase/firestore/dist/index.node.mjs'
+        )
+
+        // add any other firebase alias you need
+      }
+    },
+  },
 })

packages/nuxt/playground/package.json

@@ -1,4 +1,19 @@
 {
   "private": true,
-  "name": "my-module-playground"
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "nuxt": "^3.0.0"
+  },
+  "dependencies": {
+    "@firebase/app-types": "^0.8.1",
+    "firebase": "^9.14.0",
+    "nuxt-vuefire": "workspace:*",
+    "vuefire": "workspace:*"
+  }
 }

packages/nuxt/playground/pages/firestore/config.vue

@@ -9,21 +9,23 @@ const configRef = doc(db, 'configs', 'jORwjIykFo2NmkdzTkhU')
 const isDoneFetching = ref(false)
 const isAllDoneFetching = ref(false)
 
-getDoc(configRef).then((data) => {
-  console.log('got data once', data)
-})
-
-const { data: config, promise } = useDocument(configRef, { wait: true })
+const { data: config, promise } = useDocument(configRef)
 // const { data: hey } = useDocument(configRef)
 
-promise.value.then((data) => {
-  console.log('one', data)
-  isDoneFetching.value = true
-})
+onMounted(() => {
+  promise.value.then((data) => {
+    if (process.client) {
+      console.log(data)
+    }
+    isDoneFetching.value = true
+  })
 
-usePendingPromises().then((data) => {
-  console.log(data)
-  isAllDoneFetching.value = true
+  usePendingPromises().then((data) => {
+    if (process.client) {
+      console.log(data)
+    }
+    isAllDoneFetching.value = true
+  })
 })
 </script>
 

packages/nuxt/playground/pages/firestore/plain.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { doc, getDoc } from 'firebase/firestore'
+import { onServerPrefetch, ref } from 'vue'
+import { useFirestore } from 'vuefire'
+
+const db = useFirestore()
+const configRef = doc(db, 'configs', 'jORwjIykFo2NmkdzTkhU')
+
+onServerPrefetch(async () => {
+  const snapshot = await getDoc(configRef)
+  console.log('got snapshot once', snapshot.data()?.amount)
+})
+</script>
+
+<template>
+  <div>Hello</div>
+</template>

packages/nuxt/playground/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

packages/nuxt/templates/plugin.ejs

@@ -20,10 +20,8 @@ import {
 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)