Vue Embed Guide

Integrate PraiseLane testimonials into your Vue.js application with a composable or component.

Setup Steps

Create a PraiseLane component

Create a Vue component that loads the embed script in the onMounted lifecycle hook.

<template>
  <div v-if="mode === 'inline'" id="praiselane-inline" ref="container" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  projectSlug: {
    type: String,
    required: true,
  },
  mode: {
    type: String,
    default: 'popup',
  },
});

const container = ref(null);
let scriptEl = null;

onMounted(() => {
  scriptEl = document.createElement('script');
  scriptEl.src = 'https://yourapp.com/embed.min.js';
  scriptEl.setAttribute('data-project', props.projectSlug);
  scriptEl.setAttribute('data-mode', props.mode);
  scriptEl.defer = true;

  if (props.mode === 'inline') {
    scriptEl.setAttribute(
      'data-inline-target',
      '#praiselane-inline'
    );
  }

  document.body.appendChild(scriptEl);
});

onUnmounted(() => {
  if (scriptEl && scriptEl.parentNode) {
    scriptEl.parentNode.removeChild(scriptEl);
  }
});
</script>

Use the component

Import and use the component in your views.

<template>
  <div>
    <h1>Our Product</h1>
    <!-- Popup notifications -->
    <PraiseLaneWidget project-slug="my-project" />

    <!-- Inline testimonial feed -->
    <PraiseLaneWidget
      project-slug="my-project"
      mode="inline"
    />
  </div>
</template>

<script setup>
import PraiseLaneWidget from './PraiseLaneWidget.vue';
</script>

For Nuxt.js (SSR)

If using Nuxt.js, wrap the component in a ClientOnly component to prevent SSR issues.

<template>
  <div>
    <ClientOnly>
      <PraiseLaneWidget project-slug="my-project" />
    </ClientOnly>
  </div>
</template>

Configure allowed domains

Add your Vue app domain to the allowed domains in PraiseLane project settings.

Is My Embed Working?

Run through this checklist to verify your embed is set up correctly:

Component uses onMounted for script loading
Script cleanup runs in onUnmounted
Domain is in allowed domains
data-project slug is correct
At least one approved testimonial exists
For Nuxt: component is wrapped in ClientOnly

Troubleshooting

Widget not appearing

Check that onMounted is running. Vue components must be mounted before the script can load.

SSR errors with Nuxt

Wrap the component in <ClientOnly> to ensure it only renders on the client side.

Multiple widgets after hot reload

The onUnmounted cleanup should handle this. If not, check that the script element is being properly removed.

Other Platform Guides

Back to Embed Documentation