Adding Comments to Your Vue Application with Hyvor Talk

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 a few reasons.

• Privacy-focused -- never sell your or your visitors' data, no ads/tracking on your website.
• Fast and lightweight.
• Fully customizable.
• Top-notch moderation panel and tools.

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 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 on 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 easy with hyvor-talk-vue npm library. Let's start installing it.

npm install hyvor-talk-vue

or

yarn add hyvor-talk-vue

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

• Embed -- The comments embed
• CommentCount -- Render the comment count of a page

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

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

<template>
     <div>
          <Embed websiteId={WEBSITE_ID} id={WEBPAGE_IDENTIFIER} />
     </div>
</template>

• WEBSITE_ID-- This is a unique identifier of your website. You can copy it from 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 component like shown bellow.

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

There are several values for loadModes.

Comment Count

There is a separate component to show 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.

import { CommentCount } from 'hyvor-talk-vue'
...

<CommentCount websiteId={WEBSITE_ID} id={WEBPAGE_IDENTIFIER} />

• WEBPAGE_IDENTIFIER-- Unique identifier of page/post. Use the same you set in Embed 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's 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 Documentation
• Hyvor Talk Vue Library