feat(nuxt): add auto imports

Author: posva

packages/nuxt/playground/app.vue

@@ -19,6 +19,11 @@ const routes = router
   <div>
     <nav class="nav-links">
       <ul>
+        <li>
+          <NuxtLink to="/">
+            Home
+          </NuxtLink>
+        </li>
         <li v-for="route in routes">
           <NuxtLink :to="route.to">
             {{ route.label }}

packages/nuxt/playground/middleware/vuefire-auth.ts

@@ -0,0 +1,14 @@
+import { getCurrentUser } from 'vuefire'
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  const app = useNuxtApp().$firebaseApp
+  // TODO: handle
+  if (process.server) {
+    return
+  }
+  const user = await getCurrentUser(app.name)
+  console.log('user', user)
+
+  if (!user) {
+    return navigateTo('/authentication')
+  }
+})

packages/nuxt/playground/pages/firestore-secure-doc.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { doc, getDoc } from 'firebase/firestore'
-import { useCurrentUser, useDocument, useFirestore, usePendingPromises } from 'vuefire'
-import { ref } from 'vue'
+import { doc } from 'firebase/firestore'
+import { useCurrentUser, useFirestore, usePendingPromises } from 'vuefire'
+
+definePageMeta({
+  middleware: ['vuefire-auth']
+})
 
 const db = useFirestore()
 const user = useCurrentUser()

packages/nuxt/playground/plugins/test-vuefire.ts

@@ -0,0 +1,4 @@
+export default defineNuxtPlugin((nuxt) => {
+  const firebaseApp = useNuxtApp().$firebaseApp
+  console.log('Has firebase App', !!firebaseApp)
+})

packages/nuxt/src/module.ts

@@ -1,6 +1,7 @@
 import { fileURLToPath } from 'node:url'
 import { normalize } from 'node:path'
 import {
+  addImports,
   addPlugin,
   addPluginTemplate,
   addServerHandler,
@@ -127,43 +128,71 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
         })
       }
 
-      // this allows us to the order of the plugins
-      nuxt.hook('modules:done', () => {
-        if (options.auth) {
-          addPlugin(resolve(runtimeDir, 'auth/plugin.client'))
-          // must be added after the admin module to use the admin app
-          addPlugin(resolve(runtimeDir, 'auth/plugin.server'))
-        }
+      // NOTE: the order of the plugins is reversed, so we end by adding the app plugin which is used by all other
+      // plugins
 
-        if (options.admin) {
-          if (!nuxt.options.ssr) {
-            console.warn(
-              '[VueFire]: The "admin" option is only used during SSR. You should reenable ssr to use it.'
-            )
-          }
-          addPlugin(resolve(runtimeDir, 'admin/plugin.server'))
-        }
+      if (options.auth) {
+        addPlugin(resolve(runtimeDir, 'auth/plugin.client'))
+        // must be added after the admin module to use the admin app
+        addPlugin(resolve(runtimeDir, 'auth/plugin.server'))
 
-        if (options.appCheck) {
-          addPlugin(resolve(runtimeDir, 'app-check/plugin'))
+        addVueFireImports([
+          // auth
+          { from: 'vuefire', name: 'useFirebaseAuth' },
+          { from: 'vuefire', name: 'useCurrentUser' },
+        ])
+      }
+
+      if (options.admin) {
+        if (!nuxt.options.ssr) {
+          console.warn(
+            '[VueFire]: The "admin" option is only used during SSR. You should reenable ssr to use it.'
+          )
         }
+        addPlugin(resolve(runtimeDir, 'admin/plugin.server'))
+      }
 
-        // plugin are added in reverse order
-        addPluginTemplate({
-          src: normalize(resolve(templatesDir, 'plugin.ejs')),
+      if (options.appCheck) {
+        addPlugin(resolve(runtimeDir, 'app-check/plugin'))
+      }
 
-          options: {
-            ...options,
-            ssr: nuxt.options.ssr,
-          },
-        })
+      // plugin are added in reverse order
+      addPluginTemplate({
+        src: normalize(resolve(templatesDir, 'plugin.ejs')),
 
-        // adds the firebase app to each application
-        addPlugin(resolve(runtimeDir, 'app/plugin'))
+        options: {
+          ...options,
+          ssr: nuxt.options.ssr,
+        },
       })
+
+      // adds the firebase app to each application
+      addPlugin(resolve(runtimeDir, 'app/plugin'))
+
+      addVueFireImports([
+        // firestore
+        { from: 'vuefire', name: 'useDocument' },
+        { from: 'vuefire', name: 'useCollection' },
+        { from: 'vuefire', name: 'useFirestore' },
+
+        // database
+        { from: 'vuefire', name: 'useDatabase' },
+        { from: 'vuefire', name: 'useDatabaseList' },
+        { from: 'vuefire', name: 'useDatabaseObject' },
+      ])
     },
   })
 
+type VueFireModuleExportKeys = keyof Awaited<typeof import('vuefire')>
+function addVueFireImports(
+  imports: Array<{
+    from: 'vuefire'
+    name: VueFireModuleExportKeys
+  }>
+) {
+  return addImports(imports)
+}
+
 export default VueFire
 export type {
   NuxtVueFireAppCheckOptions,