LogPulse / integrations
Add a changelog widget to Vue & Nuxt in 4 minutes
Turn shipped work into updates your Vue & Nuxt users actually see. Add a <15kb, zero-dependency widget with unread badges, markdown release notes, emoji reactions and dark mode—without rebuilding your site.
- 1
Create your workspace and first release
Sign up for LogPulse, choose a workspace slug and publish an update. The example uses acme: replace it with your own workspace slug before publishing.
- 2
Open Your repository → app.vue (Nuxt) or App.vue (Vue)
Use onMounted in a root component to append the script on the client. Keep browser globals out of server-rendered setup code.
- 3
Publish and verify on your live site
Test a hard refresh and client navigation. Keep the loader mounted once for the entire application. Open the widget, read an update and check the unread badge. Your hosted changelog lives at /your-workspace and your roadmap at /your-workspace/roadmap on the LogPulse origin.
Your installation code
Replace acme with your workspace slug. Install one loader only; the custom-trigger example below replaces the default embed, rather than adding another copy.
<script setup>
import { onMounted } from "vue";
onMounted(() => {
if (document.getElementById("logpulse-widget")) return;
const script = document.createElement("script");
script.id = "logpulse-widget";
script.src = "https://release-ripple-roadmap.lovable.app/widget.js";
script.dataset.workspace = "acme";
script.dataset.mode = "popover";
script.dataset.theme = "auto";
script.async = true;
document.body.appendChild(script);
});
</script>
<!-- Keep your existing root template. -->Use your own What's new button
Give a real button the ID whats-new and connect data-trigger to it. In a framework, add the same data-trigger attribute to your loader and render the button in your component. Keep the target present when the widget initializes.
<button id="whats-new" type="button">What's new</button>
<script src="https://release-ripple-roadmap.lovable.app/widget.js" data-workspace="acme" data-mode="popover" data-position="bottom-right" data-theme="auto" data-trigger="#whats-new" async></script>Prefer the JavaScript API?
Initialize only after the script loads. The manual example is an alternative to the automatic loader.
<script src="https://release-ripple-roadmap.lovable.app/widget.js" data-manual async
onload="LogPulse.init({ workspace: 'acme', mode: 'popover', theme: 'auto' })"></script>
<button type="button" onclick="if (window.LogPulse) LogPulse.open()">What's new</button>
<!-- After the script loads: LogPulse.close() or LogPulse.toggle() -->Common questions
More ways to connect
Less setup. More shipping.
Give your next release an audience.
Up to 10 releases and 100 subscribers, with the ⚡ Powered by LogPulse badge. Pro is €12/month or €99/year.