Adding Comments to Your Vue Application with Hyvor Talk

Rohitha Perera
Adding Comments to Your Vue Application with Hyvor Talk

We have released our own blogging platform: Hyvor Blogs. Start your own blog for free today!! ✌✌

Do you have a website, application, or blog which is powered by Vue.js? Or, are you using a Vue-based framework like Vuetify or Nuxt? This guide explains how to add comments to any Vue application using the Hyvor Talk commenting platform.

First, what is Hyvor Talk?

Hyvor Talk is an embeddable, fully-functional commenting platform for any website (that supports many platforms). Among the other similar options available in the market, Hyvor Talk is special due to many reasons.

  • Privacy-focused – never sell your or your visitors’ data, no ads/tracking on your website.

  • It is fast and lightweight.

  • Fully customizable.

  • Top-notch moderation panel and tools.

Hyvor Talk Moderation Panel - Tweaking Appearance

How to Use Hyvor Talk on Your Vue-Powered Site

Step 1: Register your site in Hyvor Talk Console

First of all, you need a Hyvor Account, which you can sign up for in a few minutes. Register here. Then, navigate to the Hyvor Talk console. In the console, you can find two fields to add your website details. You can add multiple websites here if you want.

Then you can see the newly added website in the top left corner and all the controllers related to that website. This panel gives you full authority to control and customize your Hyvor Talk integration.

Step 2: Integrate Hyvor Talk to your site

Installing Hyvor Talk on your Vue JS-powered website can be done easily with hyvor-talk-vue npm library. Let's start installing it.

1npm install hyvor-talk-vue

or

1yarn add hyvor-talk-vue

Next, we import the above-installed Hyvor Talk vue library to our web pages. There are two main components in this library, Embed and CommentCount.

  • Embed - The comments embed

  • CommentCount - Render the comment count of a page

1import { Embed } from 'hyvor-talk-vue'
2...

Now, you can place the 'Embed' component where you need to place comments.

1<template>
2     <div>
3          <Embed websiteId={WEBSITE_ID} id={WEBPAGE_IDENTIFIER} />
4     </div>
5</template>

  • WEBSITE_ID- This is a unique identifier of your website. You can copy it from the General area in your account console.

  • WEBPAGE_IDENTIFIER - Unique ID to identify the current page. We'll load the different comments section on each page. If you do not set this, the canonical URL of the page will be used as the identifier.

Tip: If you want to load comments when the user scrolls down (Lazy Mode) add loadMode="scroll" property to embed components shown below.

1<Embed websiteId={WEBSITE_ID} loadMode="scroll" />

There are several values for loadModes.

Comment Count

There is a separate component to show the comment count of each article to keep users engaged on your website. You can do it simply by importing CommentCount component from hyvor-talk-vue.

1import { CommentCount } from 'hyvor-talk-vue'
2...
3
4<CommentCount websiteId={WEBSITE_ID} id={WEBPAGE_IDENTIFIER} />

  • WEBPAGE_IDENTIFIER- Unique identifier of page/post. Use the same you set in Embed the component. If you do not set any ID there, you'll need to use the canonical URL of the page here.

That’s how simple it is to add comments to your Vue application. And, there are a lot of customizations available. You can check them in the console or go through our documentation for more details. If you have any questions, feel free to comment below.

Resources

Hyvor Talk

Comments & Reactions

Powered by Hyvor Blogs