refactor: Vue SFC type resolution during module build

Addresses an issue where the Vue SFC transformer couldn't resolve imported types from 'nuxt-users/utils' during the module build process.

This commit defines Props interfaces inline within the Vue components to ensure compatibility and proper type resolution during the module build.

Author: rrd108

src/runtime/components/NUsersList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRuntimeConfig } from '#imports'
-import { defaultDisplayFields, defaultFieldLabels, type DisplayFieldsProps, type User } from 'nuxt-users/utils'
+import { defaultDisplayFields, defaultFieldLabels, type User } from 'nuxt-users/utils'
 
 interface Pagination {
   page: number
@@ -17,7 +17,14 @@ interface UsersResponse {
   pagination: Pagination
 }
 
-withDefaults(defineProps<DisplayFieldsProps>(), {
+// Note: We define Props interface inline instead of importing DisplayFieldsProps from 'nuxt-users/utils'
+// because the Vue SFC transformer cannot resolve these imported types during the module build process
+interface Props {
+  displayFields?: string[]
+  fieldLabels?: Record<string, string>
+}
+
+withDefaults(defineProps<Props>(), {
   displayFields: () => defaultDisplayFields,
   fieldLabels: () => defaultFieldLabels
 })

src/runtime/components/NUsersLoginForm.vue

@@ -1,20 +1,28 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { navigateTo } from '#app'
-import type { LoginFormData, LoginFormProps, UserWithoutPassword, ModuleOptions } from 'nuxt-users/utils'
+import type { LoginFormData, UserWithoutPassword, ModuleOptions } from 'nuxt-users/utils'
 import { useRuntimeConfig } from '#imports'
 
 const { public: { nuxtUsers } } = useRuntimeConfig()
 const { passwordValidation } = nuxtUsers as ModuleOptions
 
+// Note: We define Props interface inline instead of importing LoginFormProps from 'nuxt-users/utils'
+// because the Vue SFC transformer cannot resolve these imported types during the module build process
+interface Props {
+  apiEndpoint?: string
+  forgotPasswordEndpoint?: string
+  redirectTo?: string
+}
+
 interface Emits {
   (e: 'success', user: UserWithoutPassword): void
   (e: 'error' | 'forgot-password-error', error: string): void
   (e: 'submit', data: LoginFormData): void
   (e: 'forgot-password-success'): void
 }
 
-const props = defineProps<LoginFormProps>()
+const props = defineProps<Props>()
 
 const emit = defineEmits<Emits>()
 

src/runtime/components/NUsersPasswordStrengthIndicator.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { PasswordValidationResult } from '../../utils'
+import type { PasswordValidationResult } from 'nuxt-users/utils'
 import { useRuntimeConfig } from '#imports'
 import type { ModuleOptions } from 'nuxt-users/utils'
 
+// Note: We define Props interface inline to ensure compatibility during the module build process
 interface Props {
   password: string
   validationResult: PasswordValidationResult | null

src/runtime/components/NUsersResetPasswordForm.vue

@@ -11,11 +11,19 @@
  * For password change: requires user to be logged in and provide current password
  */
 import { ref, watch, computed } from 'vue'
-import type { UserWithoutPassword, ModuleOptions, ResetPasswordFormProps } from 'nuxt-users/utils'
+import type { UserWithoutPassword, ModuleOptions } from 'nuxt-users/utils'
 import { usePasswordValidation } from '../composables/usePasswordValidation'
 import { useRuntimeConfig, useRoute, useRouter } from '#imports'
 import NUsersPasswordStrengthIndicator from './NUsersPasswordStrengthIndicator.vue'
 
+// Note: We define Props interface inline instead of importing ResetPasswordFormProps from 'nuxt-users/utils'
+// because the Vue SFC transformer cannot resolve these imported types during the module build process
+interface Props {
+  updatePasswordEndpoint?: string
+  resetPasswordEndpoint?: string
+  redirectTo?: string
+}
+
 interface Emits {
   (e: 'success', user: UserWithoutPassword): void
   (e: 'error' | 'password-error', error: string): void
@@ -25,7 +33,7 @@ interface Emits {
 const { public: { nuxtUsers } } = useRuntimeConfig()
 const moduleOptions = nuxtUsers as ModuleOptions
 
-const props = defineProps<ResetPasswordFormProps>()
+const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 const route = useRoute()

src/runtime/components/NUsersUserCard.vue

@@ -2,11 +2,15 @@
 import { computed } from 'vue'
 import { useAuthentication } from '../composables/useAuthentication'
 import { useRuntimeConfig } from '#imports'
-import { defaultDisplayFields, defaultFieldLabels, type DisplayFieldsProps, type User } from 'nuxt-users/utils'
+import { defaultDisplayFields, defaultFieldLabels, type User } from 'nuxt-users/utils'
 
-interface Props extends DisplayFieldsProps {
+// Note: We define Props interface inline instead of importing DisplayFieldsProps from 'nuxt-users/utils'
+// because the Vue SFC transformer cannot resolve these imported types during the module build process
+interface Props {
   user: User
   index: number
+  displayFields?: string[]
+  fieldLabels?: Record<string, string>
 }
 
 const props = withDefaults(defineProps<Props>(), {

src/runtime/components/NUsersUserForm.vue

@@ -4,9 +4,13 @@ import type { RuntimeModuleOptions, User } from 'nuxt-users/utils'
 import { usePasswordValidation } from '../composables/usePasswordValidation'
 import { useRuntimeConfig } from '#imports'
 
-const props = defineProps<{
+// Note: We define Props interface inline instead of importing types from 'nuxt-users/utils'
+// because the Vue SFC transformer cannot resolve these imported types during the module build process
+interface Props {
   user?: User | null
-}>()
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   (e: 'submit', userData: Partial<User>): void