# Nuxt

> nuxt-precog is a Nuxt module. Add it, set a key, and press Shift+P.

## Install

<pm-x command="nuxt module add nuxt-precog">



</pm-x>

```sh [.env]
TYPESAFE_API_KEY="your-api-key"
```

Using a [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) key instead? Name it
`AI_GATEWAY_API_KEY` and the module routes through the gateway on its own. The two are not
interchangeable; see [the API key](/guide/options#the-api-key).

That is the whole setup. The defaults prefetch at most three links and never prerender. Run
`nuxt dev`, open a page and press <kbd>

Shift

</kbd>

+<kbd>

P

</kbd>

.

## Let it prerender as well

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ["nuxt-precog"],
  precog: {
    mode: "auto",
    takeOverNuxtLinkPrefetch: true,
  },
});
```

`takeOverNuxtLinkPrefetch` turns off `NuxtLink`'s viewport prefetch and leaves prefetch on
interaction alone, so precog decides ahead of the cursor and Nuxt still covers the moment it
lands.

<warning>

A prerendered page runs its JavaScript: analytics fire, `onMounted` fetches run, media can
autoplay. Read [prerendering has side effects](/guide/how-it-works#prerendering-has-side-effects)
first.

</warning>

## What it warms

`preloadPayload` and `preloadRouteComponents` for the routes the model picked. The payload is
the part that matters, and it only exists for prerendered routes with
`experimental.payloadExtraction`.

## DevTools

A tab with live metrics, the current plan, the ranking with reasons, and buttons that pause,
resume and re-predict in the page. Development only.

## Coming from 0.2.0

Nothing to do beyond upgrading. The package keeps its name, its options and its behaviour; the
workspace split happened underneath it.