fix: composables are initialized on mount

Defers initialization of authentication and user composables until the component is mounted to prevent potential issues with SSR and component lifecycle.

This change also ensures composables are accessed safely using computed properties, providing default values when the composable is not yet initialized. This addresses potential errors related to accessing reactive properties before they are available.

Author: rrd108

src/runtime/components/NUsersList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, computed } from 'vue'
 import { useUsers } from '../composables/useUsers'
 import { defaultDisplayFields, defaultFieldLabels, type User } from 'nuxt-users/utils'
 
@@ -19,26 +19,37 @@ const emit = defineEmits<{
   (e: 'editClick' | 'delete', user: User): void
 }>()
 
-const {
-  users,
-  pagination,
-  loading,
-  error,
-  fetchUsers,
-  removeUser
-} = useUsers()
+// Initialize the composable state as null initially
+let usersComposable: ReturnType<typeof useUsers> | null = null
+
+// Create computed properties that safely access the composable
+const users = computed(() => usersComposable?.users.value ?? [])
+const pagination = computed(() => usersComposable?.pagination.value ?? null)
+const loading = computed(() => usersComposable?.loading.value ?? false)
+const error = computed(() => usersComposable?.error.value ?? null)
 
 onMounted(() => {
+  // Initialize the composable only after the component is mounted
+  usersComposable = useUsers()
+
   // Fetch users only if the list is empty to avoid unnecessary fetches
   if (users.value.length === 0) {
-    fetchUsers()
+    usersComposable.fetchUsers()
   }
 })
 
 const handleDelete = (user: User) => {
-  removeUser(user.id)
+  if (usersComposable) {
+    usersComposable.removeUser(user.id)
+  }
   emit('delete', user)
 }
+
+const handleFetchUsers = (page?: number, limit?: number) => {
+  if (usersComposable) {
+    usersComposable.fetchUsers(page, limit)
+  }
+}
 </script>
 
 <template>
@@ -117,23 +128,23 @@ const handleDelete = (user: User) => {
       <slot
         name="pagination"
         :pagination="pagination"
-        :fetch-users="fetchUsers"
+        :fetch-users="handleFetchUsers"
         :loading="loading"
       >
         <div v-if="pagination && pagination.totalPages > 1">
           <div>
             <button
               v-if="pagination.hasPrev"
               :disabled="loading"
-              @click="fetchUsers(pagination.page - 1)"
+              @click="handleFetchUsers(pagination.page - 1)"
             >
               Previous
             </button>
 
             <button
               v-if="pagination.hasNext"
               :disabled="loading"
-              @click="fetchUsers(pagination.page + 1)"
+              @click="handleFetchUsers(pagination.page + 1)"
             >
               Next
             </button>

src/runtime/components/NUsersLogoutLink.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { navigateTo } from '#app'
 import { useAuthentication } from '../composables/useAuthentication'
 
@@ -30,23 +30,34 @@ const props = withDefaults(defineProps<LogoutLinkProps>(), {
 
 const emit = defineEmits<Emits>()
 
-const { logout } = useAuthentication()
+// Initialize the composable state as null initially
+let authComposable: ReturnType<typeof useAuthentication> | null = null
 const isLoading = ref(false)
 const error = ref('')
 
+onMounted(() => {
+  // Initialize the composable only after the component is mounted
+  authComposable = useAuthentication()
+})
+
 const handleLogout = async (event: Event) => {
   event.preventDefault()
 
   if (!confirm(props.confirmMessage)) {
     return
   }
 
+  if (!authComposable) {
+    error.value = 'Authentication not initialized'
+    return
+  }
+
   isLoading.value = true
   error.value = ''
 
   try {
     emit('click')
-    await logout()
+    await authComposable.logout()
     emit('success')
 
     // Redirect if specified

src/runtime/components/NUsersProfileInfo.vue

@@ -1,7 +1,17 @@
 <script setup lang="ts">
+import { computed, onMounted } from 'vue'
 import { useAuthentication } from '../composables/useAuthentication'
 
-const { user } = useAuthentication()
+// Initialize the composable state as null initially
+let authComposable: ReturnType<typeof useAuthentication> | null = null
+
+// Create computed property that safely accesses the composable
+const user = computed(() => authComposable?.user.value ?? null)
+
+onMounted(() => {
+  // Initialize the composable only after the component is mounted
+  authComposable = useAuthentication()
+})
 </script>
 
 <template>

src/runtime/components/NUsersUserCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useAuthentication } from '../composables/useAuthentication'
 import { useRuntimeConfig } from '#imports'
 import { defaultDisplayFields, defaultFieldLabels, type User } from 'nuxt-users/utils'
@@ -22,9 +22,19 @@ const emit = defineEmits<{
   (e: 'delete' | 'editClick', user: User): void
 }>()
 
-const { user: currentUser } = useAuthentication()
 const { public: { nuxtUsers } } = useRuntimeConfig()
 
+// Initialize the custom composable state as null initially
+let authComposable: ReturnType<typeof useAuthentication> | null = null
+
+// Create computed property that safely accesses the composable
+const currentUser = computed(() => authComposable?.user.value ?? null)
+
+onMounted(() => {
+  // Initialize the custom composable only after the component is mounted
+  authComposable = useAuthentication()
+})
+
 const canEdit = computed(() => {
   if (!currentUser.value) return false