Setup

Learn how to setup strapi module in your Nuxt 3 application.

Installation

Add @nuxtjs/strapi dev dependency to your project:

yarn add --dev @nuxtjs/strapi

npm install @nuxtjs/strapi --save-dev

Then, add @nuxtjs/strapi to the modules section of your Nuxt configuration:

export default {
  modules: ['@nuxtjs/strapi'],
  strapi: {
    // Options
  }
}

Options

Defaults:

{
  url: process.env.STRAPI_URL || 'http://localhost:1337',
  prefix: '/api',
  version: 'v4',
  cookie: {},
  cookieName: 'strapi_jwt'
}

If you want to override any options on runtime, you may use Nuxt 3 runtime-config

runtimeConfig: {
   public: {
      strapi: {
        url: 'http://localhost:1337' // can be overridden by NUXT_PUBLIC_STRAPI_URL environment variable
      },
   }
},

url

URL of the Strapi server.

Environment variable STRAPI_URL can be used to override url.

prefix

Prefix of the Strapi server. Only used when version is v4.

Learn how to change the default API prefix in your Strapi server.

version

Version of the Strapi server. Can only be v4 or v3.

cookie

Cookie options of the Strapi token cookie.

All cookie options can be found in the Nuxt documentation

cookieName

Cookie name of the Strapi token cookie

auth.populate

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

Learn more on Populating documentation.

auth.fields

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

Learn more on Field Selection documentation.

devtools

Embed the Strapi admin to the Nuxt Devtools, read more in the Devtools section.

Edge channel

To use the latest updates pushed on the dev branch, you can use @nuxtjs/strapi-edge.

Update your package.json to the following:

{
  "devDependencies": {
    "@nuxtjs/strapi": "npm:@nuxtjs/strapi-edge@latest"
  }
}

Then run npm install or yarn install.