vue-gitlab-api

vue-gitlab-api

A deadly simple Vue.js plugin to consume GitLab API.

Using it

Install and import

npm install vue-gitlab-api

In your main application JS file (typically main.js if you are using vue-cli webpack template), simply use the plugin:

// vue-resource is needed too
import VueResource from 'vue-resource'
Vue.use(VueResource)

// import vue-gitlab-api
import GitLabAPI from 'vue-gitlab-api'
Vue.use(GitLabAPI, { url: 'https://gitlab.com', token: 'user Private Token' })

You can configure application wide options while Vue.use'ing this plugin:

Name	Description
url	your GitLab instance URL (defaults to https://gitlab.com)
token	your GitLab private token use to connect to the API

Consume GitLab API

From anywhere now, you can simply consume GitLab API:

Vue.GitLabAPI.get('/projects', {}, [this.myGitLabData, 'projects'])

You can also use it in your .vue components with this.GitLabAPI:

this.GitLabAPI.get('/projects', {}, [this.myGitLabData, 'projects'])

Important: if you want to your filled-in property this.myGitLabData.projects to be reactive "the Vue.js way", you MUST define this variable as a data in your components or vues, with a default value of an empty object (read myGitLabData: {}). See how to do it on a vue component on this example:

<template>
  <div>
    <p>Projects grabbed: {{ projectsCount }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      myGitLabData: {}
    }
  },
  mounted: function () {
    this.GitLabAPI.get('projects', {}, [this.myGitLabData, 'projects'])
  },
  computed: {
    projectsCount: function () {
      if (this.myGitLabData.projects) {
        return this.myGitLabData.projects.length
      }
      return 'none yet...'
    }
  }
}
</script>

This is due to the fact Vue does not allow to add new reactive properties dynamically. Read more about it on the awesome Vue.js guide.

Vuex store module

Using Vuex? You can attach vue-gitlab-api Vuex module to your application store. Within one of your .vue components, simply register it before you using it from your application:

// registers GitLabAPI Vuex module to your application Vuex store
this.GitLabAPI.registerStore(this.$store)

// you are now able to read this state
this.$store.state.GitLabAPI.downloading

Here are Vuex states provided by vue-gitlab-api to your application:

Vuex state	Type	Description
downloading	Boolean	Defines if vue-gitlab-api is currently downloading
running	Number	Count vue-gitlab-api requests running now

Have a look at Vuex for more details, or read on this complete example:

import Vue from 'vue'

// your application is using Vuex
import Vuex from 'vuex'
Vue.use(Vuex)

// remember vue-resource is needed for vue-gitlab-api
import VueResource from 'vue-resource'
Vue.use(VueResource)

// using vue-gitlab-api
import GitLabAPI from 'vue-gitlab-api'
Vue.use(GitLabAPI, { url: 'https://gitlab.com', token: 'user Private Token' })

// declare your Vuex store
const store = new Vuex.Store({})

// this is your application
const app = new Vue({
  el: '#app',
  mounted: {
    // register GitLabAPI Vuex store!
    this.GitLabAPI.registerStore(store)
  },
  computed: {
    // with this computed property, do something insanely simple such as:
    // <p v-if="downloading">Downloading from GitLab...</p>
    downloading: function () {
      if (typeof store.state.GitLabAPI !== 'undefined') {
        return store.state.GitLabAPI.downloading
      } else {
        return false
      }
    }
  }
})

Methods

Here are the methods available through Vue.GitLabAPI

/**
 * Issue a GET request on 'GitLabAPI_url/api/v3' with params and a variable to fill in
 * @param  {String}   uri     The GitLab API uri to consume such as '/projects'
 * @param  {Object}   params  A parameters object such as { 'project_id': 72 }
 * @param  {Array}    fillIn  The Vue.js defined data to fill in with results from GitLab API
 * @param  {Function} errorCb A callback function in case of error (response is passed to callback)
 */
get: function (uri, params, fillIn, errorCb) {}

/**
 * Set application wide GitLabAPI token value
 * @param {String} newToken The new token value
 */
setToken: function (newToken) {}

/**
 * Set application wide GitLabAPI url value
 * @param {String} newUrl The new GitLab URL value
 */
setUrl: function (newUrl) {}

Contributing

Initial scaffolding was done with vue-cli webpack template. For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Simply said, one can start working on its own customized version of vue-gitlab-api in no time:

# install dependencies
npm install

# run unit tests
npm run unit

# serve with hot reload at localhost:8080
npm run dev

What's next?

Without any obligation nor due date, one could expect to be done this non-exhaustive list of improvements grouped on issues labeled Feature.

You can read on the Changelog too, for historical and upcoming new features, changes, deprecations, removed features, bug and security fixes.

Support

Your are free to open an issue right in this GitLab repository whether you should be facing a problem or a bug. Please advise this is not a commercial product, so one could experience random response time. Positive, friendly and productive conversations are expected on the issues. Screenshots and steps to reproduce are highly appreciated. Chances are you may get your issue solved if you follow these simple guidelines.

Credits

• Logo derived from a SlideGenius creation CC licensed

License

The vue-gitlab-api plugin is distributed under the MIT License (MIT). Please have a look at the dependencies licenses if you plan on using, building, or distributing this plugin.

Changelog

0.1.6 - 2016-10-26

Added

• Vuex store module provides downloading state (Boolean) and total number or running requests
• Using Vuex? You can now register your application Vuex store to improve it with GitLabAPI Vuex store module