2.3.3
2.3.3

Integrations

How to use this SDK within your favorite Framework. 🚀

React

Create a strapi.js file to set up your Strapi SDK instance. Then, import this file wherever you need to use it.

strapi.js
import Strapi from 'strapi-sdk-js'

export const strapi = new Strapi({
  // ...options
})
Usage
import { strapi } from '~/strapi'

const MyComponent = () => {

  const handleFetch = async () => {
    try {
      const response = await strapi.find('restraurants')
    } catch (error) {
      console.error(error)
    }
  }

  return <button onClick={handleFetch}>Fetch restaurants</button>
}

Nuxt 3

If you want to easily fetch your Strapi content from a Nuxt 3 application, you can check the Strapi module developed by the Nuxt team.

Unlike Nuxt 2, you only need to set up a plugin, and then you can simply access $strapi using useNuxtApp wherever you need to use it.

~/plugins/strapi.js
import { defineNuxtPlugin } from '#app'
import Strapi from 'strapi-sdk-js'

export default defineNuxtPlugin(() => {
  const strapi = new Strapi({
    // options
  })
  return {
    provide: {
      strapi,
    },
  }
})
Usage
<script setup>
  const { $strapi } = useNuxtApp()

  const restaurants = await $strapi.find('restaurants')
</script>

Nuxt 2

To use the Strapi SDK globally, set up a plugin and include it in the nuxt.config.js file:

~/plugins/strapi.js
import Strapi from 'strapi-sdk-js'

export default (_, inject) => {
  const strapi = new Strapi({
    // options
  })

  inject('strapi', strapi)
}
nuxt.config.js
export default {
  // ...
  plugins: ['~/plugins/strapi'],
  // ...
  build: {
    extend(config) {
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },
}

Now, you can use it globally with this.$strapi in components and app.$strapi in the asyncData function.

Webpack

In some case, your webpack based application will not support by default .mjs files. In order to fix this you can update your webpack config with the following configuration:

webpack.config.js
module.exports = {
  // ...other configuration options

  resolve: {
    extensions: [..., '.mjs'], // Add '.mjs' to the list of extensions
  },

  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto', // Use the 'javascript/auto' type for .mjs files
      },
    ],
  },
}
Edit this page on GitHub
Table of Contents