DEV Community

Cover image for Simple comment section with vue components

Simple comment section with vue components

tsanak on April 25, 2018

Recently I started to migrate the frontend part of my work from jquery to Vue.js and it feels amazing! I always liked working on the frontend, but ...
Collapse
 
hoodlumz profile image
David Elstob

Nice post. Thanks. Just looking for a comment section for my Gridsome site and they recommend Disqus, but that will probably be too slow for my liking.

Your solution should be much faster, I presume?

Well I can only try and see how it goes. :)

Collapse
 
celyes profile image
Ilyes Chouia • Edited

when using disqus, don't show it right after the loading... let the user click "show comments" button which when clicked, loads the disqus system... i use this approach as a work-around to this problem as well as to achieve a good score in Google Lighthouse...

Collapse
 
tsanak profile image
tsanak

Sorry for my late reply.

Thank you for your comment!

I think Disqus offers a good solution for adding comments to your website, I have not tested the perfomance of it though.

The problem with my solution is that it doesn't have any backend so you should think of a way to handle listing & adding comments.

If you used this "plugin", then please let me know if you encountered any issues.

Full code can be found in github.com/tsanak/comments

Collapse
 
biefeng profile image
biefeng • Edited

sdasd

Collapse
 
itsmrsammeh profile image
Sam Parton

Finally nice to see someone use Events over Vuex, even in the simple scenarios. Good post my dude.

Collapse
 
tsanak profile image
tsanak

Thank you! I like to use events when the project is simple ☺️

Collapse
 
shriaviator profile image
shriaviator

Gr8 Post !!! Will try to integrate the above with firestore !!

Collapse
 
dgleba profile image
dgleba

I would like to see the full code. Can you post it?

Collapse
 
tsanak profile image
tsanak

Sorry for my late reply. Here is the code: github.com/tsanak/comments created with vue cli 3.

Collapse
 
carlosjdelgadonovaims profile image
carlosjdelgadonovaims

Hello, thank you so much for this example, I'd like to see all the code, is that possible?. Or see like a demo, I'm new working with VueJs, so I'll appreciate if you can provide the complete code.

Collapse
 
tsanak profile image
tsanak

Thank you for your comment.
Here is the code: github.com/tsanak/comments created with vue cli 3.

If you want you can check my other articles on Vue (repos included)

  1. Make your life easier with vuejs
  2. Building an image carousel with vuejs

Also make sure to finish all of Vue's documentation, I found it really helpful.

Collapse
 
orazcharyar profile image
OrazCharyar

Nice