Getting started with Vue.js

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

Installation

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

npx create-vue-app prepr-demo

And navigate to your new site:

cd prepr-demo

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

npm i prepr-vue

Configuration

Okay, now we can register the plugin inside src/index.js and modify the default settings.

// src/index.js

import Vue from 'vue'
import App from './components/App.vue'
import { PreprPlugin } from 'prepr-vue'

Vue.use(PreprPlugin, {
  baseUrl: 'https://api.eu1.prepr.io', // Default
  token: '<YOUR_ACCES_TOKEN>', // Required
  timeout: 4000, // Default
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: (h) => h(App),
})

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 is required in order to make API requests. You can obtain the AccessToken from your Prepr environment.

Usage

Let's make that plugin do some work.

<script>
export default {
  data() {
    return {
      publications: {}
    }
  },

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

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

By default, Vue.js doesn't ship with a router. To resolve data based on route parameters, we suggest using Vue Router. You can install Vue Router easily by running npm install vue-router in your project or vue add router if you're using Vue CLI. Now you should be able to access data by id or slug.

<script>
export default {
  data() {
    return {
      publication: {}
    }
  },

  async mounted() {
    const id = $route.params.id

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

    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)