Skip to main content
ReadMeter

Nuxt

ReadMeter works with Nuxt 3. The installer adds the widget to nuxt.config and provides a composable for REST/proxy setups.

Quick setup

From your Nuxt project folder, run:

readmeter add

The installer copies the widget to public/readmeter-widget.js, adds it to app.head.script in nuxt.config.ts, and adds the useReadMeter composable.

Config injection

The widget is added via tagPosition: 'bodyOpen' so it loads at the start of <body>, before your app and Firebase. Do not use defer: true — it can load the script too late.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: '/readmeter-widget.js', tagPosition: 'bodyOpen' },
      ],
    },
  },
})

Firebase REST or proxy

If your Nuxt app talks to Firestore via REST (e.g. vpa.example.com/firebase/...) or a proxy instead of the Firebase SDK, the widget cannot intercept reads automatically. Use the useReadMeter() composable:

// In your useFirestoreTracker, firestore-tracker.client.ts, or wherever you track reads
const { recordRead } = useReadMeter()
recordRead({
  reads: 5,
  collection: 'users',
  type: 'getDocs',
  caller: 'fetchUsers',
})

Call recordRead when your API returns read counts. The composable is auto-imported from composables/useReadMeter.ts.

Modular Firebase SDK (v9+)

If you use the Firebase SDK in the browser, switch imports to the wrapper:

// Before
import { getDoc, getDocs, onSnapshot } from 'firebase/firestore'

// After
import { getDoc, getDocs, onSnapshot } from './lib/readmeter-firestore'

Next steps