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

Configuration

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

// nuxt.config.js

export default {
    modules: [
        '@preprio/nuxtjs-sdk'
    ],

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

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 publication = await $prepr.graphqlQuery(`{
        Posts {
          items {
            _id
            title
            summary
            _read_time
          }
        }
      }`).fetch();

    return {
      publication.data.Posts.items,
    }
  },
}
</script>