nuxt-github-api

Source plugin for pulling data into Nuxt from the official GitHub v4 GraphQL API. Data is fetched at build time, and can be used to create static assets.

📖 Release Notes

Setup

1. Follow GitHub's guide to generate a token.
2. Add this token to your environment variables (PLEASE don't commit this token!!!)
3. Add nuxt-github-api dependency to your project

yarn add nuxt-github-api # or npm install nuxt-github-api

2. Add nuxt-github-api to the modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    'nuxt-github-api',

    // With options
    [
      'nuxt-github-api',
      {
        // token: required by the GitHub API
        token: process.env.GITHUB_API_TOKEN,

        // graphQLQuery: defaults to a search query
        graphQLQuery: `
          query GetUser($login: String!) {
            user(login: $login) {
              name
              avatarUrl
              bio
              isHireable
            }
          }
          `,

        // variables: Object which includes any GraphQL variables required by your query.
        variables: {
          login: 'lindsaykwardell'
        }
      }
    ]
  ],
}

You can also pass the options as a separate key:

{
  github: {
    // token: required by the GitHub API
    token: process.env.GITHUB_API_TOKEN,

    // graphQLQuery: defaults to a search query
    graphQLQuery: `
      query GetUser($login: String!) {
        user(login: $login) {
          name
          avatarUrl
          bio
          isHireable
        }
      }
      `,

    // variables: Object which includes any GraphQL variables required by your query.
    variables: {
      login: 'lindsaykwardell'
    }
  }
}

In your Vue components, you can now access this data on this.$github. For example:

<template>
  <div>
    <div>
      <img :src="https://github.com/lindsaykwardell/nuxt-github-api/raw/master/$github.user.avatarUrl" />
      <h2>{{ $github.user.name }}</h2>
      <h4>{{ $github.user.bio }}</h4>
      <p>{{ lookingForAJob }}</p>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    lookingForAJob() {
      return this.$github.user.isHireable
        ? 'Looking for a great place to work!'
        : 'Not currently looking for a job'
    }
  }
}
</script>

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Create .env file at the root of the project.
4. Add variable: GITHUB_TOKEN
5. Start development server using npm run dev

License

MIT License

Copyright (c) Lindsay Wardell

Tips and Tricks

You'll probably want to use valid GraphQL queries. To help you, GitHub has a Query Explorer with auto-completion.