What is Vue Comments?

Vue Comments is a Vue 3 component which allows you to render and process comments in a headless WordPress environment via the Companion WordPress Plugin. This component will work in any environment where Vue is supported (such as Astro.js). Currently, it supports both rendering and submitting comments, and (optionally) Google reCAPTCHA v3.

Setup Guide

• Install and active the companion Vue Comments Plugin in your headless WordPress site, configure it with your allowed origins and get your API Key. You can additionally configure reCAPTCHA v3 if desired.
• Install this package in your front-end project using npm (or your favorite package manager):
  • npm install @970design/vue-comments
• Import and use the VueComments component in your front-end project, passing the required props (see example below) - including the apiKey which is provided by the companion WordPress plugin.

Example Usage (with Astro.js)

---
import VueComments from "@970design/vue-comments";

const postID = 1;
const endpoint = 'https://my-headless-wordpress.com';
const apiKey = import.meta.env.COMMENTS_API_KEY;
---

	<VueComments
		client:load
		post_id={postID}
		endpoint={endpoint}
		api_key={apiKey}
	/>

You can also include our default styling by importing the CSS file:

import '@970design/vue-comments/dist/style.css';

Props

Prop	Type	Required	Description
endpoint	string	Yes	The base URL of your headless WordPress site
post_id	number	Yes	The ID of the Post/Page/etc to display comment for.
api_key	string	Yes	API Key generated by the companion WordPress plugin.
order	string	No	Comment sort order: 'ASC' or 'DESC' (default: 'DESC')

More Information

The development of this package is sponsored by 970 Design, a creative agency based in Vail, Colorado. If you need help with your headless WordPress project, please don't hesitate to reach out.