Embed PraisedBy testimonials in your Vue.js application with a simple script tag or our embed package. Works with Vue 2, Vue 3, and Nuxt.
Create a free PraisedBy account. Set up your testimonial space and start collecting reviews from customers.
In your Vue component template, add the widget container div and the PraisedBy script tag. You can place it in any Vue component.
The widget loads automatically and renders inside Shadow DOM. It works with Vue's reactivity system and doesn't interfere with your Vue components.
<!-- Vue Component Template -->
<template>
<section class="testimonials">
<h2>Customer Reviews</h2>
<div id="praisedby-widget"></div>
</section>
</template>
<script setup>
import { onMounted } from "vue";
onMounted(() => {
const script = document.createElement("script");
script.src = "https://cdn.praisedby.com/widget.js";
script.dataset.spaceId = "YOUR_SPACE_ID";
script.dataset.layout = "grid";
document.getElementById("praisedby-widget")
?.appendChild(script);
});
</script>Simple script tag that works in any Vue component. Load in onMounted for SSR safety.
Works with Vue 2, Vue 3, Nuxt 2, and Nuxt 3 without compatibility issues.
Configure layout, colors, and behavior through data attributes on the script tag.
Auto-detect visitor locale and show translated testimonials for Vue internationalized apps.
Yes. You can use the script embed in a Nuxt page or component. Load the script in the onMounted lifecycle hook to ensure it runs client-side.
Currently, the recommended approach is the script tag embed or the vanilla JS package. A dedicated Vue package with composables is on our roadmap.
No. Shadow DOM ensures complete style isolation. The PraisedBy widget renders in its own DOM tree, so Vuetify, Quasar, or any other framework styles cannot affect it.