Setup

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

Installation

Add @nuxtjs/strapi dev dependency to your project:

yarn

yarn add --dev @nuxtjs/strapi

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

nuxt.config.js|ts

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 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`

v1.5.0+Strapi v4.2.2+

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

Learn more on Populating documentation.

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:

package.json

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

Then run npm install or yarn install.

Usage