---
title: "Strapi"
description: "Nuxt Image with Strapi integration."
canonical_url: "https://nuxt.com/modules/image/providers/strapi"
---
# Strapi

> Nuxt Image with Strapi integration.

Integration between [Strapi](https://strapi.io) and the image module.

No specific configuration is required. You just need to specify `strapi` in your configuration to make it the default:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  image: {
    strapi: {}
  }
})
```

Override default options:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  image: {
    strapi: {
      baseURL: 'http://localhost:1337/uploads'
    }
  }
})
```

## Modifiers

The `breakpoint` modifier is used to specify the size of the image.

By default, when the image is uploaded and **Enable responsive friendly upload** Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes:

| Name     | Largest Dimension |
| -------- | ----------------- |
| `small`  | 500px             |
| `medium` | 750px             |
| `large`  | 1000px            |

You can override the default breakpoints. See the [Media Library configuration](https://docs.strapi.io/cms/features/media-library#responsive-images) in the Strapi documentation.

If you don't set breakpoint modifier, the original image size will be used:

```vue
<NuxtImg
  provider="strapi"
  src="..."
/>
```

Define breakpoint modifier:

```vue
<NuxtImg
  provider="strapi"
  src="..."
  :modifiers="{ breakpoint: 'small' }"
/>
```

::note
Only one breakpoint can be modified per image.
::

---

- [Source](https://github.com/nuxt/image/blob/main/src/runtime/providers/strapi.ts)


## Sitemap

See the full [sitemap](https://nuxt.com/sitemap.md) for all pages.