0.1.6 • Published 3 years ago
nuxt-github-api v0.1.6
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-api
dependency to your project
yarn add nuxt-github-api -D # or npm install nuxt-github-api --save-dev
- Add the following configuration to your
nuxt.config.js
file:
{
privateRuntimeConfig: {
// githubApiToken: required by the GitHub API
githubApiToken: process.env.GITHUB_TOKEN
},
buildModules: [
'nuxt-github-api',
],
githubApi: {
// 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
ornpm 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.