How to load more than 100 stories with the JS client in NuxtJS?

For retrieving all the stories or more than 100 items from Storyblok in a Nuxt project, you can use all the methods and parameters from the Storyblok JS client. These methods are explained in detail in the article How to load more than 100 stories with the JS client?. These methods are available because the Storyblok Nuxt SDK relies on the Storyblok JS client.

The recommended approach is to use the getAll() method provided by the Storyblok JS client.

The getAll() method manages the pagination mechanism. With one method call, all the necessary HTTP API requests for pagination to retrieve all the data will be performed according to the rate limits. In fact, the getAll() method also handles the mechanism to slow down multiple API calls to adhere the rate limit.

The only thing that you need to consider when using the Storyblok Nuxt SDK is how to instantiate and set up the Storyblok Client in a Nuxt application, as well as how to access to the StoryblokClient in the JavaScript code to use the getAll() method.

If you are using Nuxt 3 and you installed the Storyblok Nuxt SDK :

npm install @storyblok/nuxt

you can configure the initialization parameters for the Storyblok Nuxt SDK in the nuxt.config.ts (or .js) file:

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    [
      '@storyblok/nuxt',
      { accessToken: 'your-access-token' }
    ]
  ],
})

In the modules section, include the @storyblok/nuxt key with the configuration object, including at least the mandatory attribute accessToken.

Then, in the script section of your Vue component or wherever you typically implement the logic for retrieving external data in your Nuxt project, you can access to the Storyblok object via the composable function useStoryblokApi. Once you have obtained the object, you can access the getAll() method as shown in the example below:

const storyblokApi = useStoryblokApi() // accessing to the Storyblok client object
const data  = await storyblokApi.getAll('cdn/stories', {
    version: 'draft',
})

For more information about the getAll() method and the parameters you can use for content filtering, refer to the article How to load more than 100 stories with the JS client?.