vue-github-api

A Vue.js test project

Screenshot

Retiring vue-resource

As Vue users, many of you may have used vue-resource for handling ajax requests in your Vue applications. For a long time it’s been thought of as the “official” ajax library for Vue, but today we are retiring it from official recommendation status.

Read on Medium

Tips for Using Axios with Vue

1. You need to provide your own Promise polyfill when using Axios, if your target environments do not natively support Promises.
2. If you’d like to access this.$http like in vue-resource, you can just set Vue.prototype.$http = axios.

Build Setup

# install dependencies
yarn

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

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

Learning Milestone

• Get a user from github
• Display the user info
  • Store data in user object
  • Display user info in nice card
• Call another API from user object public repos
  • Store repos data in cache
  • Check cache when switching between views to prevent redundant API call
  • Made a Vue.js compoenent; Usercard
  • Learned computed, methods
  • Learned Vue.js life cycle; beforeCreate, beforeMount, mounted, afterMount, etc...
• Call remaining callable API public gists, followers, following
  • Call and process gists
  • Call and process followers
  • Call and process following
• Get multiple user from a single input
  • User object now stored in users array
• Output users in multiple cards
  • Dynamic card style base on how many cards. just using nth-child conditioning
• Animate list of Usercards on hover
• Animate list of Usercards on enter after search
• Highlight class @click as active for v-for
• Add sort for Usercard by id login followers etc...
• Sort feature for repos list
• Load more repos as default API request is limited to 30 repos per page
  • Bonus point if I can make option for infinite scrolling
• Learn vue-router
• Learn vuex