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

3 года назад

9,406 Просмотров

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.

The component has been improved: Previous video: https://www.youtube.com/watch?v=ubc6sqLA7EI

Checkout the code here: https://codesandbox.io/s/avatar-input-component-with-vuejs-and-tailwindcss-jpg80

Sometimes I blog: https://tallpad.com

Тэги:

#vuejs #vue #tailwindcss

Скачать видео

Комментарии:

Abdelwahab Bounasser - 02.10.2022 22:05

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

Ответить

Keyl - 22.12.2021 10:31

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

Ответить

John Otaalo - 15.10.2021 12:41

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

Ответить