This module is not yet compatible with Nuxt 3

nuxt-github-api

Nuxt module for GitHub v4 API

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

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

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

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="$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

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

License

MIT License

Tips and Tricks

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

Query Explorer