Installation Guides
Vue.js
Add RevDock to your Vue 3 application in under 2 minutes.
Works with Vue 3, Nuxt 3, and Vite-based Vue projects.
Setup
The simplest approach — add the script to your index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script
defer
src="https://getrevdock.com/scripts/revdock.js"
data-website-id="YOUR_WEBSITE_ID"
></script>
</head>
<body>
<div id="app"></div>
</body>
</html>In nuxt.config.ts, add the script to the head:
export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://getrevdock.com/scripts/revdock.js',
defer: true,
'data-website-id': 'YOUR_WEBSITE_ID',
},
],
},
},
});Using a composable (Vue 3)
For more control, create a composable:
// composables/useRevDock.ts
import { onMounted, onUnmounted } from 'vue';
export function useRevDock(websiteId: string) {
let script: HTMLScriptElement | null = null;
onMounted(() => {
script = document.createElement('script');
script.src = 'https://getrevdock.com/scripts/revdock.js';
script.defer = true;
script.dataset.websiteId = websiteId;
document.head.appendChild(script);
});
onUnmounted(() => {
script?.remove();
});
}Then use it in your App.vue:
<script setup>
import { useRevDock } from './composables/useRevDock';
useRevDock('YOUR_WEBSITE_ID');
</script>Verify it's working
- Deploy your app
- Visit your live site
- Check the RevDock dashboard — widgets should appear within minutes