Avatar image input component with VueJS, Inertia, and Tailwind CSS

Every modern app I can think of has some sort of avatar or profile photo.

Instead of using a basic file input to change the avatar, it would be nice to have a dedicated component for it so we can display a preview of the photo we'll be using.

In this video we'll do just that: we'll create a VueJS avatar image input component where we can easily pick, remove, and preview the image we want to set as our avatar.

[thebirdhasbeencharged]

Would love to see a video on modals with Inertia. Keep up the good work!

[JohnOtaalo]

For those getting a null value when uploading the image, I got a workaround.

Replace
this.$emit('input', e.target.files[0])
with
this.$emit('update:modelValue', e.target.files[0])

Vue 3 had an update sometime in 2021 that does not use the value prop to update Parent Component models.
Hope this helps

[mdparvezalam]

I'm getting Null values for: from.avatar in laravel 8

[abdobouna]

how do you generate those default avatars, are you using a Laravel package for that?

[itsKeyl]

whats the vue3 or smthn alternative for $refs because for me it returns undefined