Add analytics and article counts to Nuxt

Install the tracker and read-only article counter, verify pageviews, and handle local development and client navigation.

1. Prepare two separate IDs

Copy the application ID from installation settings. Create an article counter, explicitly enable public counts, and copy its counter ID. These IDs are different. Install the tracker once globally; the counter only displays data.

2. Install scripts and the counter

Call useHead once in app.vue. Add the counter in the article page. On client-side navigation, wait for nextTick before refreshing counts; do not access window during SSR.

useHead({ script: [
  { src: 'https://antdock.com/js/tracker.js', async: true, 'data-app-id': 'YOUR_APP_ID', tagPosition: 'bodyClose' },
  { src: 'https://antdock.com/api/article-counters/embed.js', defer: true, 'data-counter-id': 'YOUR_COUNTER_ID', tagPosition: 'bodyClose' },
] })

Replace YOUR_APP_ID and YOUR_COUNTER_ID with the actual console values. Put this element in each article to show counts for its current path.

<span data-antdock-counter="YOUR_COUNTER_ID"><span data-page-count="views">—</span></span>

Client-side navigation does not reload scripts. Refresh read-only counts after the article elements update:

import { watch, nextTick } from 'vue'
const route = useRoute()
if (import.meta.client) watch(() => route.path, async () => {
  await nextTick()
  window.dispatchEvent(new Event('antdock:page-counts'))
})

3. Verify received data

1. Deploy and open an article in a fresh private window. Local hosts are excluded by default; add data-allow-local to the tracker only when deliberately testing a local example.
2. Confirm a new pageview for that path in installation verification or visit records. Check the new path after client navigation, without duplicate script installation or manual pageviews.
3. Confirm the counter changes from — to a number. Read-only counts may update later and cover retained data, not lifetime totals. Disabled sharing or a failed request leaves —, which is not zero.

Debugging and troubleshooting

Use ?antdock=ignore to exclude this browser on this domain and ?antdock=track to resume. Filter DevTools Network with -domain:antdock.com. Blocking, CSP or network restrictions can prevent collection; check domains, IDs and public counter permission.

Counts use the current URL path without query or fragment. For multiple articles in a list, set each parent’s data-page-path to its actual article path. Old platform totals are not imported automatically.

Nuxt official integration reference · 2026-10-14

Choose your platform