Vue + Prepr CMS

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, {
    token: '<YourAccessToken>', // You can find one in your Prepr environment
    baseUrl: 'https://graphql.prepr.io/graphql',
    userId: null, // Optional, used for AB testing implmentations
})

Vue.config.productionTip = false

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

Usage

Let's make that plugin do some work.

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

  async mounted() {
    const publications = await this.$prepr
    .graphqlQuery(`{
            posts : BlogPosts {
                items {
                    _id
                    title
                    summary
                    _read_time
                }
            }
        }`)
    .fetch();

    this.publications = publications.data.posts.items
  },
}
</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
    .graphqlQuery(`{
            items : BlogPosts {
                items {
                    _id
                    title
                    summary
                    _read_time
                }
            }
        }`)
    .fetch();

    this.publication = publication.data.posts.items
  },
}
</script>