Install on Vue and Nuxt

1. Install the package

npm install @terragamingmedia/ads-vue

2a. Nuxt: add the module

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@terragamingmedia/ads-vue/nuxt"],
  tgm: { host: "tgmads.example.com" },
});

The module adds the site tag to every page’s <head> and registers <TgmAd> and <TgmFloating>. You can also set the host with NUXT_PUBLIC_TGM_HOST.

2b. Vue: install the plugin

import { createApp } from "vue";
import { createTgm } from "@terragamingmedia/ads-vue";

createApp(App)
  .use(createTgm({ host: "tgmads.example.com" }))
  .mount("#app");

Before your CNAME is verified, also pass your ids: { host: "cdn.terramedia-sandbox.com", property: "PROP-…", publisher: "PUB-…", inArticle: "TGM-…-INART", articleSelector: ".post-content" }.

3. Place your ad units

<template>
  <TgmAd unit="TGM-ABC-HRS01" />
  <TgmFloating unit="TGM-ABC-GMA01" />
</template>

<TgmAd> reserves space during server rendering and mounts the ad container in the browser only. When it unmounts, the tag removes its ad. In-article ads are automatic.

Routing

Vue Router and Nuxt navigation are detected automatically. To call page views yourself, set spa: "manual" and call useTgm().pageview() in router.afterEach.