AuthForm displaying incorrectly

[Mallon94]

Hi @benjamincanac, thanks for creating this laravel-starter. I cloned the repo and tested the issue I was having with the AuthForm displaying incorrectly. The top icon is misaligned and the providers do not show icon or space correctly.

I have attached a screenshot of how it displays. I thought initially it was an issue with my css or something, but have replicated it here in this repo too. I even went back to UI Pro docs and copy and pasted the usage example code to make sure I had not made a mistake. I have attached the vue file for login and then added a route in web.php to access the login page.

import * as z from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'

const toast = useToast()

const fields = [{
  name: 'email',
  type: 'text' as const,
  label: 'Email',
  placeholder: 'Enter your email',
  required: true
}, {
  name: 'password',
  label: 'Password',
  type: 'password' as const,
  placeholder: 'Enter your password'
}, {
  name: 'remember',
  label: 'Remember me',
  type: 'checkbox' as const
}]

const providers = [{
  label: 'Google',
  icon: 'i-simple-icons-google',
  onClick: () => {
    toast.add({ title: 'Google', description: 'Login with Google' })
  }
}, {
  label: 'GitHub',
  icon: 'i-simple-icons-github',
  onClick: () => {
    toast.add({ title: 'GitHub', description: 'Login with GitHub' })
  }
}]

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

type Schema = z.output<typeof schema>

function onSubmit(payload: FormSubmitEvent<Schema>) {
  console.log('Submitted', payload)
}
</script>

<template>
  <div class="flex flex-col items-center justify-center gap-4 p-4">
    <UPageCard class="w-full max-w-md">
      <UAuthForm
        :schema="schema"
        title="Login"
        description="Enter your credentials to access your account."
        icon="i-lucide-user"
        :fields="fields"
        :providers="providers"
        @submit="onSubmit"
      />
    </UPageCard>
  </div>
</template>

As a side note, on the starter would it be possible to include an example of where RouterLink becomes InertiaLink?

Thanks

[benjamincanac]

Indeed, there are multiple issues here:

1. the providers icons wont work with this format as in Vue we're not using @nuxt/icon but @iconify/vue, you have to write it like this: simple-icons:github instead of i-simple-icons-google' (this wont work for any collection with a -)
2. the icon is not centered because in Vue it renders an SVG instead of a span, I'll push a fix about this! In the meantime you can set :ui="{ leadingIcon: 'inline-block' }"
3. the providers buttons are not well spaced, this is due to how our Link component renders for Inertia but it has been fixed already in fix(inertia): link always render as anchor tag nuxt/ui#3989 and will be released in the next patch