Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hasura/awesome-vue-graphql

A curated collection of resources, clients and tools that make working with `GraphQL and Vue.js` awesome
https://github.com/hasura/awesome-vue-graphql

List: awesome-vue-graphql

awesome-list graphql hasura vue-graphql vuejs

Last synced: 2 days ago
JSON representation

A curated collection of resources, clients and tools that make working with `GraphQL and Vue.js` awesome

Awesome Lists containing this project

README 

        
# Awesome Vue GraphQL [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)



> A curated collection of resources, clients and tools that make working with `GraphQL and Vue` awesome.



## Contents



- [General Resources](#general-resources)

- [Clients](#clients)

- [Developer Tools](#developer-tools)

- [Tutorials](#tutorials)

- [Boilerplates](#boilerplates-and-example-apps)

- [Advanced Use Cases](#advanced-use-cases)

- [Server Side Tools](#server-side-tools)

- [Articles and Videos](#articles-and-videos)

- [Stories](#stories)



## General Resources



- [GraphQL](http://graphql.org/learn/)

- [VueJS](https://vuejs.org/v2/guide/#Getting-Started)

- [Vue-Apollo](https://apollo.vuejs.org/)



## Clients



> VueJS clients for GraphQL



- [Apollo](https://www.apollographql.com/): Apollo Client is a community-driven GraphQL client for React, JavaScript, and native platforms

  - [Docs](https://www.apollographql.com/docs/react/)

  - [Github](https://github.com/apollographql)

  - [Slack](https://www.apollographql.com/slack)

- [AWS Amplify](https://aws-amplify.github.io): AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. AWS Amplify goes well with any JavaScript based frontend workflow, and React Native for mobile developers.

  - [Docs](https://aws-amplify.github.io/docs/js/vue)

  - [Github](https://github.com/aws-amplify/amplify-js)

  - [Gitter](https://gitter.im/AWS-Amplify/Lobby)



## Developer Tools



> Tools for better development (debugging, linting, validation etc)



- Code generators:

  - [apollo-codegen](https://github.com/apollographql/apollo-codegen): Generate API code or type annotations based on a GraphQL schema and query documents

  - [graphql-code-generator](https://github.com/dotansimha/graphql-code-generator): GraphQL code generator with flexible support for custom templates

- Linters:

  - [eslint-plugin-graphql](https://github.com/apollographql/eslint-plugin-graphql): Check your GraphQL query strings against a schema

- VueJS debugging tools

  - [VueJS Developer tools](https://github.com/vuejs/vue-devtools): Chrome and Firefox extensions to debug vue applications

- VueJS Apollo Debugging Tools

  - [Apollo Client Developer Tools](https://github.com/apollographql/apollo-client-devtools#apollo-client-devtools): Chrome and Firefox extension for Apollo Client developer tools

- GraphQL Workflows:

  - [GraphQL Playground](https://github.com/graphcool/graphql-playground): Powerful GraphQL IDE built on top of GraphiQL

  - [Altair GraphQL Client](https://altair.sirmuel.design/): A beautiful feature-rich GraphQL Client for all platforms

  - [GraphiQL Online](https://graphiql-online.com): An online version of GraphiQL with a configurable endpoint and headers.



## Tutorials



> Awesome tutorials for using GraphQL with Vue

- VueJS

  - [Vue + Apollo Tutorial](https://learn.hasura.io/graphql/vue)

  - [Getting Started with VueJS](https://medium.freecodecamp.org/a-quick-introduction-to-vue-js-72937ee8880d)

  - [Making a ToDo application with VueJS](https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2)

  - [Getting started with VueJS, apollo and Graphql](https://www.howtographql.com/vue-apollo/0-introduction/)

  - [(Video) Using GraphQL, VueJS and Apollo to Create Blog Application](https://youtu.be/N49R1gifUqs)

  - [(Video) VueJS, Apollo and GraphQL](https://www.howtographql.com/vue-apollo/0-introduction/)

- Miscellaneous

  - [Why VueJs and GraphQL can be ultimate stack](https://youtu.be/nq5q_gOOimA)



## Boilerplates and Example Apps



> Boilerplates and examples for a headstart in development



- VueJS Apollo

  - [Vue + GraphQL + Auth0](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/vuejs-auth0-graphql)

  - [Vue + Vuetify + Vuex](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/vuetify-vuex-todo-graphql)

  - [Nuxt.js + GraphQL](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/nuxtjs-postgres-graphql)

  - [Vue + Graphql + Apollo Tutorial](https://github.com/graphql-boilerplates/vue-fullstack-graphql)

  - [VueJs Starter app with AWS amplify](https://github.com/aws-samples/aws-amplify-vue)



## Advanced Use Cases



- Server-side Rendering

  - [Understanding Server-side rendering with Vue Apollo](https://akryum.github.io/vue-apollo/guide/ssr.html)

- Realtime

  - [Polling](https://dev-blog.apollodata.com/dynamic-graphql-polling-with-react-and-apollo-client-fb36e390d250): Dynamic GraphQL polling with React and Apollo Client

  - [Subscriptions with Vue Apollo Client](https://akryum.github.io/vue-apollo/guide/apollo/subscriptions.html#setup): Learn how to achieve realtime data with GraphQL subscriptions using Vue Apollo Client.

  - [Managing Local Data](https://github.com/apollographql/apollo-link-state): if You need to manage your app lcoal state you can do so with apollo link state.

- JWT

  - [Ultimate guide to handling JWTs on frontend clients](https://blog.hasura.io/best-practices-of-using-jwt-with-graphql/)



## Server Side Tools



> Get a GraphQL backend for your applications using these service providers



- [AWS AppSync](https://aws.amazon.com/appsync/): Build data-driven apps with real-time and offline capabilities

- [Graphcool](https://graph.cool): Self-Hosted GraphQL BaaS

- [Hasura](https://hasura.io): Instant GraphQL APIs on Postgres

- [Postgraphile](https://www.graphile.org): Rapidly build highly customisable GraphQL APIs

- [Prisma](https://www.prisma.io/): Simplifies database access in your resolvers (replacing traditional ORMs).



## Articles and Videos



### Articles



- [So what’s this GraphQL thing I keep hearing about?](https://medium.freecodecamp.org/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf)

- [Thinking in Graphs](http://graphql.org/learn/thinking-in-graphs/)

- [What are the benefits of using GraphQL and why it surpasses REST](https://blog.hellocomet.co/graphql-benefits-api/)

- [Create Nuxt.js Universal Apps with GraphQL on Postgres](https://blog.hasura.io/create-nuxt-js-universal-apps-using-graphql-on-postgres/)

- [Leveraging Vue.js & GraphQL with Gridsome](https://snipcart.com/blog/vuejs-graphql-airtable-example)



### Videos



- [From REST to GraphQL](https://www.youtube.com/watch?v=ntBU5UXGbM8)



## Stories



> Good and bad experiences



- [Between the Wires: An interview with Vue.js creator Evan You](https://medium.freecodecamp.org/between-the-wires-an-interview-with-vue-js-creator-evan-you-e383cbf57cc4/)

- [(Video) Lessons from 4 Years of GraphQL](https://www.youtube.com/watch?v=zVNrqo9XGOs)

- [2017: The year in GraphQL](https://dev-blog.apollodata.com/2017-the-year-in-graphql-124a050d04c6)

- [Harry Wolf: Experiences with GraphQL](http://hswolff.com/blog/experiences-with-graphql/)

- [JetRuby: Our experience with GraphQL](https://expertise.jetruby.com/our-experience-with-node-js-react-graphql-c40007ad4373)