Build a CHAT APP in VUE and FIREBASE using Vue's Composition API

Подписаться 58 тыс.

Просмотров 36 тыс.

50% 1

Today we learn how to build a chat app in Vue JS and Firebase using the composition API available to us in Vue 3. We look at creating a connection to a firebase database and rendering the data powered by Vue JS to our browser.
Source Code: github.com/Tyl...
// FOLLOW ME ON TWITTER
/ tyler_potts_
// MY GEAR FOR CODING AND RU-vid
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.co...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

Опубликовано:

15 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

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

@maskman4821 3 года назад

This is an awesome firebase chat app build with vuejs composition api, excellent step by step instructions and walk through, the ui is beautifully designed, Mr. Tyler Potts is trully a vuejs master and the man !!!

@TylerPotts 3 года назад

Thank you! :)

@samratbhaware404 3 года назад

Yeah Finally You Make One More Vue Application

@TylerPotts 3 года назад

And there will be plenty more where that came from too!

@tshivhulatshilidzi9209 3 года назад

Literally subscribed because of this vue tutorial

@octavian3033 3 года назад

Awesome tutorial. Covered everything I needed to know about making a chat app. Firebase was an added bonus.

@TylerPotts 3 года назад

Glad it helped!

@zaeemansari8828 2 года назад

I am getting this error while sending message b__WEBPACK_IMPORTED_MODULE_1__.default.database is not a function

@TylerPotts 2 года назад

Sorry I'm not sure what is causing that 🤔

@MrJudsonrodrigues 2 года назад

i have a similar _db__WEBPACK_IMPORTED_MODULE_4__.default.database is not a function :(

@MrJudsonrodrigues 2 года назад

I have the same error 🙁

@labaks4844 2 года назад

pls were you ever able to resolve this? currently facing same.

@thihuynh774 2 года назад

Did you fix it ?

@rotorink 3 года назад

i combined this with your firebase auth video and works great. thanks. now i just need to add condition if user has already signed up AND created a username then they cannot create an additional username without registering for a new account; and if they are already signed up they will not need to put in there username again to see the chat. liking comments would be a cool feature as well.

@Frankslaboratory 3 года назад

Hi Tyler, thanks for teaching us

@TylerPotts 3 года назад

You're VERY welcome!

@heyyy4987 3 года назад

nice.. more advanced relationships with firestore and vue, thanks

@TylerPotts 3 года назад

More to come!

@RexGalilae 3 года назад

Here before component could even mount

@TylerPotts 3 года назад

Love that xD

@nivellen1168 3 года назад

Thank you very much! I was looking for content like that!

@TylerPotts 3 года назад

Glad you liked it!

@programmerrdai 3 года назад

Great Content Keep up the good work !

@TylerPotts 3 года назад

Thanks! I will do!

@hillno 3 года назад

Great video! Yes Authentication please!

@TylerPotts 3 года назад

Will do!

@BangNguyen-kz5pn 3 года назад

Nice video. But you forgot inserting github link in the video description.

@TylerPotts 3 года назад

Thanks for reminding me xD - It is now in there! But here it is: github.com/TylerPottsDev/FireChat-Vue

@vladimirvychikov3216 Год назад

change this : import firebase from 'firebase/app'; to this: import firebase from 'firebase/compat/app';

@TylerPotts Год назад

New version? :O

@martindibrudjanski9710 Год назад

Yeah, this was the problem, thanks.

@tiborurban1701 3 года назад

Heey, whats the name of your vsCode theme?

@rangabharath4253 3 года назад

Awesome

@TylerPotts 3 года назад

You're awesome...

@abdulazeezolanrewaju843 3 года назад

Nice one bro, good work.. can't we use Firestore? instead of Real Time Db

@TylerPotts 3 года назад

Yes of course

@abdulazeezolanrewaju843 3 года назад

@@TylerPotts Please can you make a tutorial on that for the same app?

@tanzimibthesam5861 3 года назад

Cant we do this with firestore

@mohdshahzaib4094 3 года назад

Awesome tutorial, what is your vs code theme name?

@asyncFlex 2 года назад

How do you set up automatic scrolling for a chat app??

@bob00491636352895 2 года назад

Very great tutorial. But i get always on deploying vu create a node-sass error. Read a reconfiguring hundert times but have not a big result. Did somebody now this time get started with npm -v 8.10; @vue/cli 4.5.14, Node v16.11.1, package-json i rember (saas-loader 8.0.1). Greetings

@khwbhawjfamilylivechannel322 Год назад

Hello , I want to create a chat on my website where anyone can chat to my admin only, How can i create it?

@wilmanalfarezi 3 года назад

Can i see how to make this ui,, awesome..

@MrJesse0007 3 года назад

Can i also do this with the options api? How does the MessageRef then works?

@pauloe9970 3 года назад

Here even though I don't use Vue🤩

@TylerPotts 3 года назад

Not all hero's wear capes!

@flolegend6402 3 года назад

@@TylerPotts hahaha nice one :D

@wiwilu 3 года назад

Quick Question I've never worked with the eslint plugin. I've created the second div container (like 12:31) and it works but the second div is underlined in red and it says "vue/no-multiple-template-root". Did I make a mistake while setting the project up?

@TylerPotts 3 года назад

Hmmm weird, that means you haven't wrapped your divs in a single div I think?

@wiwilu 3 года назад

@@TylerPotts Edit: Somehow doing v-if and v-else seemed to have fixed this. But I'm still confused why I had this problem and you didn't It looks like this (just like in the video): ... ... The second div is marked as a Problem and the description is: [vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue

@TylerPotts 3 года назад

@@wiwilu Wrap both those divs inside 1 div!

@wiwilu 3 года назад

@@TylerPotts Thank you so much for your help! I found my mistake. I can wrap both divs in one div as you said and it works (I had a v-if statement in the first div but no v-else in the second and this didn't work at all). But having v-if and v-else w/o the extra div seems to be working as well.

@TylerPotts 3 года назад

@@wiwilu Oh yes makes sense! You can only have 1 outer element but if you use v-if and v-else it means it would only be one at render :)

@Romeo-vt8hq 3 года назад

Content simply won't be added to my database for no reason even though I'm doing completely the same thing

@flolegend6402 3 года назад

Great video

@TylerPotts 3 года назад

Yes I believe you could use cordova for this? but I'm not 100% sure...

@JonatanGlader 2 года назад

just implement PWA functionality and you can run it as an app

@painghtetaung6780 3 года назад

Can u please make one to one chat like private chat.

@augischadiegils.5109 2 года назад

♥️♥️♥️♥️♥️

@CRSSquad Год назад

how to build apk file from this code?????

@samirbabayev6269 3 года назад

Good tutorial. Can you please, say the name of the VS Code theme?

@drugoviic 2 года назад

for the icons he uses material icons theme

@tahsinalmahi8769 3 года назад

which vscode theme do you use?

@sophienainghtwe9643 2 года назад

bro plz help me bd.database is underfined

@abdalrhmanalshafei920 3 года назад

Can you make chat firebase one to one private chat please ineed it

@MuhammadAdnan2.0 3 года назад

Can we convert this in Android app and serverless ?

@TylerPotts 3 года назад

Umm I'm not sure I haven't really tried

@rargza9169 3 года назад

How can i make the scroll to the bottom automatic for new messages?

@TylerPotts 3 года назад

Good question! I haven't tried it! I'll look into it for you :D

@rargza9169 3 года назад

@@TylerPotts thank you darling! I loved your tutorial :]

@TemplatesForAfterEffectscom 3 года назад

Any updates on this?

@nisino25 3 года назад

24:41

@programmerrdai 3 года назад

First

@TylerPotts 3 года назад

You're FAST!

@anastasiabrikun577 3 года назад

I'm very thankful for this awesom lesson! One little question: how i can improve this chat and protect mesage string from symbols like Zalgo (H̡̫̤ͭ̓̓̇͗̎̀ơ̯̗͒̄̀̈ͤ̀͡w͓̲͙͋ͬ̊ͦ̂̀̚ ͎͉͖̌ͯͅͅd̳̘̿̃̔̏ͣ͂̉̕ŏ̖̙͋ͤ̊͗̓͟͜e͈͕̯̮͌ͭ̍̐̃͒s͙͔̺͇̗̱̿̊̇͞ ̸ͩͩ͑̋̀ͮͥͦ̊Z̆̊͊҉҉̠̱̦̩͕ą̟̹͈̺̹̋̅ͯĺ̡̘̹̻̩̩͋͘g̪͚͗ͬ͒o̢̖͇̬͍͇̔͋͊̓ ̢͈͂ͣ̏̿͐͂ͯ͠t̛͓̖̻̲ͤ̈ͣ͝e͋̄ͬ̽͜҉͚̭͇ͅx̌ͤ̓̂̓͐͐́͋͡ț̗̹̄̌̀ͧͩ̕͢ ̮̗̩̳̱̾w͎̭̤̄͗ͭ̃͗ͮ̐o̢̯̻̾ͣͬ̽̔̍͟r̢̪͙͍̠̀ͅǩ̵̶̗̮̮ͪ́?̙͉̥̬ͤ̌͗ͩ̕͡) or some non-utf-8 symbols? Thanks for your help. :)