---
title: "Setup"
description: "Learn how to setup the Strapi module in your Nuxt application."
canonical_url: "https://strapi.nuxtjs.org/setup"
---
# Setup

> Learn how to setup the Strapi module in your Nuxt application.

<note>

`@nuxtjs/strapi` is a **client** for a Strapi backend. It connects your Nuxt app to a Strapi server that you run and host separately. It does not install, run, or bundle Strapi itself. If you don't have a Strapi server yet, follow the [Strapi quick start](https://docs.strapi.io/dev-docs/quick-start) first, then point the [`url`](#url) option at it.

</note>

## Installation

Add `@nuxtjs/strapi` module to your project:

```bash
npx nuxi@latest module add strapi
```

This will add the module to the `modules` section of your `nuxt.config.ts`. You can then configure it:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxtjs/strapi'],
  strapi: {
    // Options
  }
})
```

## Options

Defaults:

```ts
{
  url: process.env.STRAPI_URL || 'http://localhost:1337',
  token: process.env.STRAPI_TOKEN || undefined,
  prefix: '/api',
  admin: '/admin',
  version: 'v5',
  cookie: {},
  cookieName: 'strapi_jwt',
  auth: {},
  devtools: false
}
```

If you want to override any options on runtime, you may use [Nuxt runtime-config](https://nuxt.com/docs/getting-started/configuration#environment-variables-and-private-tokens):

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  // Example of separate client/server URLs
  runtimeConfig: {
    strapi: {
      url: 'http://localhost:1337'
    },
    public: {
      strapi: {
        url: 'http://localhost:1337'
      }
    }
  }
})
```

### `url`

URL of the Strapi server.

Defaults to the `STRAPI_URL` environment variable when `url` is not set.

### `token`

Strapi API token used as a fallback when no user is logged in. Defaults to the `STRAPI_TOKEN` environment variable.

<warning>

This option is exposed to the client through the public runtime config, so use a read-only token with the minimum permissions. To keep the token on the server, leave this option and `STRAPI_TOKEN` unset and use `runtimeConfig.strapi.token` instead.

</warning>

### `admin`

Specify admin prefix used by your Strapi.

### `prefix`

Prefix of the Strapi server. Not for version `v3`.

> Learn how to change the default [API prefix](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/api.html) in your Strapi server.

### `version`

Version of the Strapi server. Can only be `v5`/`v4`/`v3`.

### `cookie`

Cookie options of the Strapi token cookie.

> All cookie options can be found in the [Nuxt documentation](https://nuxt.com/docs/api/composables/use-cookie#options)

### `cookieName`

Cookie name of the Strapi token cookie

### `auth.populate` <u-badge className="align-middle,rounded-full" label="v1.5.0+" variant="subtle"></u-badge> <u-badge className="align-middle,rounded-full" label="Strapi v4.2.2+" variant="subtle"></u-badge>

Configure the `populate` query param of the `/users/me` route.

> Learn more on [Populating documentation](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/entity-service/populate.html#advanced-populating).

### `auth.fields` <u-badge className="align-middle,rounded-full" label="v1.7.0+" variant="subtle"></u-badge> <u-badge className="align-middle,rounded-full" label="Strapi v4.2.2+" variant="subtle"></u-badge>

Configure the `fields` query param of the `/users/me` route.

> Learn more on [Field Selection documentation](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.html#field-selection).

### `devtools` <u-badge className="align-middle,rounded-full" label="v1.9.0+" variant="subtle"></u-badge>

Embed the Strapi admin to the [Nuxt Devtools](https://devtools.nuxtjs.org), read more in the [Devtools section](https://strapi.nuxtjs.org/devtools).

## Continuous releases

Nuxt Strapi uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

Automatic preview releases are created for all commits and PRs to the `main` branch. Use them by replacing your package version with the specific commit hash or PR number.

```diff [package.json]
{
  "dependencies": {
-   "@nuxtjs/strapi": "^2.1.1",
+   "@nuxtjs/strapi": "https://pkg.pr.new/@nuxtjs/strapi@95260d0",
  }
}
```

<note>

**pkg.pr.new** will automatically comment on PRs with the installation URL, making it easy to test changes.

</note>


## Sitemap

See the full [sitemap](https://strapi.nuxtjs.org/sitemap.md) for all pages.