Adding Comments to Your Vue Application with Hyvor Talk
Tags: vue, comments
Published: 2021-03-02 02:52:48

Do you have a website, application, or blog which is powered by [Vue.js](https://vuejs.org/)? Or, are you using a Vue-based framework like [Vuetify](http://vuetifyjs.com/) or [Nuxt](https://nuxtjs.org/)? This guide explains how to add comments to any Vue application using the [Hyvor Talk commenting platform](https://talk.hyvor.com/).

First, what is Hyvor Talk?
--------------------------

Hyvor Talk is an embeddable, fully-functional commenting platform for any website (that supports many [platforms](https://talk.hyvor.com/docs/install)). 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](https://auth.hyvor.com/signup). Then, navigate to the [Hyvor Talk console](https://talk.hyvor.com/console). In the console you can find two fields to add your website details. You can add multiple websites here if you want.

![](https://talk.hyvor.com/blog/wp-content/uploads/2021/02/cons-1024x412.png)

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.

![](https://talk.hyvor.com/blog/wp-content/uploads/2021/02/Inkedmod_LI-1024x498.jpg)

### 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](https://github.com/HyvorTalk/hyvor-talk-vue) npm library. Let's start installing it.

```bash
npm install hyvor-talk-vue
```

or

```bash
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

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

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

```jsx
<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](https://talk.hyvor.com/console/moderate/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.

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

There are several values for [loadModes](https://talk.hyvor.com/docs/code#usingloadingmodes).

#### 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`.

```js
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](https://talk.hyvor.com/docs/)
-   [Hyvor Talk Vue Library](https://www.npmjs.com/package/hyvor-talk-vue)