NuxtJS + Prepr CMS

This is the official Prepr SDK for Nuxt.js. It provided a standardized way for your team to communicate with the Prepr API.

Getting started is simple. Scaffoled a Nuxt.js project:

npx create-nuxt-app prepr-example

And navigate to your new site:

cd prepr-example

Once you've done that, you can simply install the module by running:

npm i @preprio/nuxtjs-sdk


Okay, now we can register the module inside nuxt.config.js and modify the default settings

// nuxt.config.js

export default {
    modules: [

    // Prepr API Configuration
    prepr: {
        token: '<YourAccessToken>', // You can find one in your Prepr environment
        baseUrl: '',
        userId: null, // Optional, used for AB testing implmentations

By default, the base url will be and the timeout before the request fails 4000 ms. The two values are not required. However. The token param is required in order to make API requests. You can obtain the AccessToken in your Prepr environment.


Cool. We have the module working. Now, time for some action. We now have global access to the $prepr function, how we can access the $prepr function depends on the context. Here are two examples.

// Example with `asyncData`

export default {
  async asyncData({ $prepr, params }) {

    const publication = await $prepr.graphqlQuery(`{
        Posts {
          items {

    return {,