Getting started with Nuxt.js

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

And navigate to your new site:

cd prepr-demo

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

npm i prepr-nuxt

Configuration

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

// nuxt.config.js

export default {
  // Settings...

  modules: ['prepr-nuxt'],

  prepr: {
    baseUrl: 'https://cdn.prepr.io', // Default
    token: '<YOUR_ACCES_TOKEN>', // Required
    timeout: 4000, // Default
  },
}

By default, the base url will be https://cdn.prepr.io 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.

Usage

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.

<script>
// Example with `asyncData`

export default {
  async asyncData({ $prepr, params }) {
    const { id } = params
    const publication = await $prepr(`/publications/${id}`, {
      query: `
        items {
          header_image {
            cdn_files {
              resized {
                thumb.w(1280).h(720)
              }
            }
          },
          elements {
            cover {
              cdn_files {
                resized {
                  thumb.w(1920)
                }
              }
            }
          }
        },
        title,
        tags,
        model
      `
    })

    return {
      publication,
    }
  },
}
</script>
<script>
// Example with `fetch`

export default {
  data() {
    return {
      publication: {}
    }
  },

  async fetch() {
    const { id } = this.params
    const publication = await this.$prepr(`/publications/${id}`, {
      query: `
        items {
          header_image {
            cdn_files {
              resized {
                thumb.w(1280).h(720)
              }
            }
          },
          elements {
            cover {
              cdn_files {
                resized {
                  thumb.w(1920)
                }
              }
            }
          }
        },
        title,
        tags,
        model
      `
    })

    this.publication = publication
  },
}
</script>

Available parameters

In the previous examples you can see how queries are executed and how $prepr is used in different contexts. Aside from query, you can also pass along a sort and limit parameter. With sort you can specify the sorting order by column, and with limit you can specify the maximum amount of records you wish to receive.

const publication = await this.$prepr(`/publications/${id}`, {
  query: `...`,
  limit: 4,
  sort: 'title',
})

Request options and headers

In some cases you might have to change the request method, CORS settings or include custom headers. You can edit the options with the third options parameter. To learn more about the available options, read Node Fetch and Fetch API.

const myCustomOptions = {
  method: 'POST',
  headers: {
    'My-Custom-Header': '<value>'
  }
}

const publication = await this.$prepr(`/publications/${id}`, {/* ... */}, myCustomOptions)