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.
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-apidependency to your project
yarn add nuxt-github-api # or npm install nuxt-github-api- Add
nuxt-github-apito themodulessection ofnuxt.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 installornpm install - Create .env file at the root of the project.
- Add variable:
GITHUB_TOKEN - Start development server using
npm run dev
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.
