# Install Foresite on Nuxt

## With the Foresite module

Install [nuxt-foresite](https://www.npmjs.com/package/nuxt-foresite):

```sh
npm install nuxt-foresite
```

Then add it to `nuxt.config.ts` with your Site ID: the `s_…` part of your Foresite line, before `.js` (**Settings → Install**):

```ts
export default defineNuxtConfig({
  modules: ['nuxt-foresite'],
  foresite: { siteId: 'YOUR_SITE_ID' },
})
```

If you set up a [custom domain](https://foresite.dev/docs/custom-domain), add it as `host: 'stats.example.com'`. You can also set the Site ID when a server-rendered app starts, with `NUXT_PUBLIC_FORESITE_SITE_ID`.

To count signups, purchases and other actions, use `useForesite()`:

```vue
<script setup lang="ts">
const foresite = useForesite()
const onSignup = () => foresite('signup', { props: { plan: 'pro' } })
</script>
```

See [custom events](https://foresite.dev/docs/custom-events) for properties and revenue.

## Without a module

Add the Tracking Script to every page's `<head>` in `nuxt.config.ts`:

```ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: 'https://t.foresite.dev/s/YOUR_SITE_ID.js', defer: true }],
    },
  },
})
```

Use the address from your own Foresite line. Then call `window.foresite()` in the browser for [custom events](https://foresite.dev/docs/custom-events).

## Check it's working

Both ways work for server-rendered, static (`nuxt generate`) and single-page Nuxt sites. Foresite counts each page change as a pageview automatically. Visits to `localhost` aren't counted, so test on your deployed site: the **Installation Check** in **Settings → Install** turns green with the first pageview.