Build a CHAT APP in VUE and FIREBASE using Vue's Composition API
HTML-код
- Опубликовано: 3 дек 2020
- 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/TylerPottsDev/Fire...
// FOLLOW ME ON TWITTER
/ tyler_potts_
// MY GEAR FOR CODING AND RUclips
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.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE
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 !!!
Thank you! :)
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.
Thank you very much! I was looking for content like that!
Glad you liked it!
Here before component could even mount
Love that xD
Awesome tutorial. Covered everything I needed to know about making a chat app. Firebase was an added bonus.
Glad it helped!
Hi Tyler, thanks for teaching us
You're VERY welcome!
nice.. more advanced relationships with firestore and vue, thanks
More to come!
Great Content Keep up the good work !
Thanks! I will do!
Yeah Finally You Make One More Vue Application
And there will be plenty more where that came from too!
Literally subscribed because of this vue tutorial
I am getting this error while sending message b__WEBPACK_IMPORTED_MODULE_1__.default.database is not a function
Sorry I'm not sure what is causing that 🤔
i have a similar _db__WEBPACK_IMPORTED_MODULE_4__.default.database is not a function :(
I have the same error 🙁
pls were you ever able to resolve this? currently facing same.
Did you fix it ?
Great video! Yes Authentication please!
Will do!
Awesome tutorial, what is your vs code theme name?
Can i also do this with the options api? How does the MessageRef then works?
How do you set up automatic scrolling for a chat app??
which vscode theme do you use?
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
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?
Hmmm weird, that means you haven't wrapped your divs in a single div I think?
@@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
@@wiwilu Wrap both those divs inside 1 div!
@@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.
@@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 :)
Cant we do this with firestore
Nice one bro, good work.. can't we use Firestore? instead of Real Time Db
Yes of course
@@TylerPotts Please can you make a tutorial on that for the same app?
Heey, whats the name of your vsCode theme?
Hello , I want to create a chat on my website where anyone can chat to my admin only, How can i create it?
Great video
Yes I believe you could use cordova for this? but I'm not 100% sure...
just implement PWA functionality and you can run it as an app
Nice video. But you forgot inserting github link in the video description.
Thanks for reminding me xD - It is now in there!
But here it is: github.com/TylerPottsDev/FireChat-Vue
Awesome
You're awesome...
Good tutorial. Can you please, say the name of the VS Code theme?
for the icons he uses material icons theme
Can i see how to make this ui,, awesome..
Content simply won't be added to my database for no reason even though I'm doing completely the same thing
Can u please make one to one chat like private chat.
bro plz help me bd.database is underfined
Can you make chat firebase one to one private chat please ineed it
Here even though I don't use Vue🤩
Not all hero's wear capes!
@@TylerPotts hahaha nice one :D
♥️♥️♥️♥️♥️
Can we convert this in Android app and serverless ?
Umm I'm not sure I haven't really tried
how to build apk file from this code?????
change this : import firebase from 'firebase/app'; to this: import firebase from 'firebase/compat/app';
New version? :O
Yeah, this was the problem, thanks.
How can i make the scroll to the bottom automatic for new messages?
Good question! I haven't tried it! I'll look into it for you :D
@@TylerPotts thank you darling! I loved your tutorial :]
Any updates on this?
24:41
First
You're FAST!
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̡̫̤ͭ̓̓̇͗̎̀ơ̯̗͒̄̀̈ͤ̀͡w͓̲͙͋ͬ̊ͦ̂̀̚ ͎͉͖̌ͯͅͅd̳̘̿̃̔̏ͣ͂̉̕ŏ̖̙͋ͤ̊͗̓͟͜e͈͕̯̮͌ͭ̍̐̃͒s͙͔̺͇̗̱̿̊̇͞ ̸ͩͩ͑̋̀ͮͥͦ̊Z̆̊͊҉҉̠̱̦̩͕ą̟̹͈̺̹̋̅ͯĺ̡̘̹̻̩̩͋͘g̪͚͗ͬ͒o̢̖͇̬͍͇̔͋͊̓ ̢͈͂ͣ̏̿͐͂ͯ͠t̛͓̖̻̲ͤ̈ͣ͝e͋̄ͬ̽͜҉͚̭͇ͅx̌ͤ̓̂̓͐͐́͋͡ț̗̹̄̌̀ͧͩ̕͢ ̮̗̩̳̱̾w͎̭̤̄͗ͭ̃͗ͮ̐o̢̯̻̾ͣͬ̽̔̍͟r̢̪͙͍̠̀ͅǩ̵̶̗̮̮ͪ́?̙͉̥̬ͤ̌͗ͩ̕͡) or some non-utf-8 symbols? Thanks for your help. :)