Nuxt Hotjar
Easily add Hotjar for tracking and analytics to your Nuxt application.
Features
- 🔥 Easily add Hotjar to your Nuxt application
- 👮 Data privacy
- 🏷️ Fully typed
- 🦾 SSR support
Setup
npx nuxi@latest module add hotjar
Configuration
Add nuxt-module-hotjar to the modules section of nuxt.config.ts and provide your Hotjar site id and the script version.
In order for Nuxt Hotjar to run, it needs to be initialized with your site ID (this is the hotjarId in our module). You can find your site ID on this page just before your site name.
export default defineNuxtConfig({
modules: [
'nuxt-module-hotjar'
],
hotjar: {
hotjarId: 1234567,
scriptVersion: 6,
// optionally you can turn on debug mode for development
debug: true
}
})
Basic usage
Now you have to initialize Hotjar in your app with the composable useHotjar:
// In you app.vue file for example when you user has given consent:
const { initialize } = useHotjar()
function onConsent() {
initialize()
}
Composables
useHotjar
The SSR-safe useHotjar composable provides access to:
- The initialize method
You can use it like this:
const { initialize } = useHotjar()
Types declarations
function useHotjar(): {
initialize: () => void
}
Modules Options
| Option | Type | Default | Description |
|---|---|---|---|
hotjarId | number | undefined | Your Hotjar site_id. |
scriptVersion | number | 6 | By default it's 6, you don’t necessarily need to change it. |
debug | boolean | false | Debug mode |
Credits
Development
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release