# @hyvor/hyvor-talk-vue

> Hyvor Talk Vue

Latest version **1.0.1** (published 2024-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hyvor/hyvor-talk-vue
pnpm add @hyvor/hyvor-talk-vue
yarn add @hyvor/hyvor-talk-vue
bun add @hyvor/hyvor-talk-vue
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-09-09 |
| First published | 2023-07-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 26.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | supunkavinda |

## Links

- npm: https://www.npmjs.com/package/@hyvor/hyvor-talk-vue
- Repository: https://github.com/hyvor/hyvor-talk-libraries
- Homepage: https://github.com/hyvor/hyvor-talk-libraries#readme
- Issues: https://github.com/hyvor/hyvor-talk-libraries/issues
- npm.io page: https://npm.io/package/@hyvor/hyvor-talk-vue

## Dependencies (1)

- [@hyvor/hyvor-talk-base](https://npm.io/package/@hyvor/hyvor-talk-base.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2024-09-09
- 1.0.0-beta.3 (beta) — 2024-09-05
- 1.0.0-beta.2 — 2024-09-04
- 1.0.0-beta.1 — 2024-09-04
- 0.0.3 — 2024-03-20
- 0.0.2 — 2023-12-03
- 0.0.1 — 2023-07-16

## README

### Installation

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

### Usage

The following components are available:

-   **`<Comments>`** - wraps [`<hyvor-talk-comments>`](https://talk.hyvor.com/docs/comments)
-   **`<CommentCount>`** - wraps [`<hyvor-talk-comment-count>`](https://talk.hyvor.com/docs/comment-counts)
-   **`<NewsletterForm>`** - wraps [`<hyvor-talk-newsletter>`](https://talk.hyvor.com/docs/newsletters)
-   **`<Memberships>`** - wraps [`<hyvor-talk-memberships>`](https://talk.hyvor.com/docs/memberships)
-   **`<GatedContent>`** - wraps [`<hyvor-talk-gated-content>`](https://talk.hyvor.com/docs/gated-content)

### Comments

Use the `<Comments>` component to add comments to your webpage. The props are the same as the attributes of [hyvor-talk-comments](https://talk.hyvor.com/docs/comments#attributes).

```vue
<script setup>
import { Comments } from "@hyvor/hyvor-talk-vue";
</script>

<template>
    <Comments :website-id="YOUR_WEBSITE_ID" page-id="UNIQUE_PAGE_ID" />
</template>
```

### Comment Counts

Use the `<CommentCount>` component to display the number of comments on a page.
All props are the same as the base [hyvor-talk-comment-count](https://talk.hyvor.com/docs/comment-counts) Web Component.

First, add the `<CommentCount>` components to your app. Then, call `CommentCounts.load()` in `onMounted` to load the comment counts.

```vue
<script setup>
import { onMounted } from "vue";
import { CommentCount } from "@hyvor/hyvor-talk-vue";
import { CommentCounts } from "@hyvor/hyvor-talk-base";

onMounted(() => {
    CommentCounts.load({
        "website-id": YOUR_WEBSITE_ID,
    });
});
</script>

<template>
    <!-- You may use multiple components -->
    <CommentCount page-id="PAGE_ID_1" />
    <CommentCount page-id="PAGE_ID_2" />
</template>
```

### Newsletter Form

Use the `<NewsletterForm>` component to add a newsletter form to your webpage. The props are the same as the attributes of [hyvor-talk-newsletter](https://talk.hyvor.com/docs/newsletters#form-properties).

```vue
<script setup>
import { NewsletterForm } from "@hyvor/hyvor-talk-vue";
</script>

<template>
    <NewsletterForm website-id="{YOUR_WEBSITE_ID}" />
</template>
```

### Memberships & Gated Content

Use the `<Memberships>` component to add memberships to your webpage. The props are the same as the attributes of [hyvor-talk-memberships](https://talk.hyvor.com/docs/memberships#component-attributes).

```vue
<script setup>
import { Memberships } from "@hyvor/hyvor-talk-vue";
</script>

<template>
    <Memberships :website-id="YOUR_WEBSITE_ID" />
</template>
```

Once you have memberships set up, you can use the `<GatedContent>` component to show content only to members. The props are the same as the attributes of [hyvor-talk-gated-content](https://talk.hyvor.com/docs/gated-content#component-attributes). The `key` prop is renamed to `_key` to avoid conflicts with the reserved `key` prop in Vue.

```vue
<script setup>
import { GatedContent } from "@hyvor/hyvor-talk-vue";
</script>

<template>
    <GatedContent _key="my-content" />
</template>
```

---

### Listening to Events

You can listen to [events](https://talk.hyvor.com/docs/comments#events) emitted by the components using `v-on` or `@`. This is supported by all components that have events.

```vue
<Comments
    :website-id="YOUR_WEBSITE_ID"
    page-id="UNIQUE_PAGE_ID"
    @loaded="() => console.log('Comments loaded')"
    @comment:published="(comment) => console.log('Comment published', comment)"
/>
```

### Accessing the Web Component Instance

You can access the underlying Web Component instance using the `ref` prop, which refers to an object with two methods: `wrap` and `element`. This is supported by all components.

```vue
<script setup lang="ts">
import { onMounted, useTemplateRef } from "vue";
import { Comments } from "@hyvor/hyvor-talk-vue";
import { type CommentsCustomElement } from "@hyvor/hyvor-talk-base";
import { CommentCounts } from "@hyvor/hyvor-talk-base";

const commentsRef = useTemplateRef<{
    wrap: () => HTMLDivElement;
    element: () => CommentsCustomElement;
}>("comments");

onMounted(() => {
    if (commentsRef.value) {
        // This is the wrapping <div> element
        const wrap = commentsRef.value.wrap();

        // This is the underlying <hyvor-talk-comments> element
        const element = commentsRef.value.element();

        element.addEventListener("loaded", () => {
            console.log(element.api.page());
        });
    }
});
</script>
<template>
    <Comments :website-id="YOUR_WEBSITE_ID" ref="comments" />
</template>
```

---
_Source: https://npm.io/package/@hyvor/hyvor-talk-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._