Book Image

Building Vue.js Applications with GraphQL

By : Heitor Ramon Ribeiro
Book Image

Building Vue.js Applications with GraphQL

By: Heitor Ramon Ribeiro

Overview of this book

Since its release by Facebook in 2012, GraphQL has taken the internet by storm. Huge companies such as Airbnb and Audi have started to adopt it, while small to medium-sized companies are now recognizing the potential of this query-based API. GraphQL may seem strange at first, but as you start to read about and experience more of it, you won’t want to use REST APIs anymore. With the recipes in this book, you will learn how to build a complete real-time chat app from scratch. Starting by creating an AWS Amplify environment, you will delve into developing your first GraphQL Schema. You will then learn how to add the AppSync GraphQL client and create your first GraphQL mutation. The book also helps you to discover the simplicity and data fetching capabilities of GraphQL that make it easy for front-end developers to communicate with the server. You will later understand how to use Quasar Framework to create application components and layouts. Finally, you will find out how to create Vuex modules in your application to manage the app state, fetch data using the GraphQL client, and deploy your application to the web. By the end of this book, you’ll be well versed in proof-of-concept full-stack applications that explore the power of GraphQL with AWS Amplify, and you'll be able to use Quasar Framework to create your Vue applications.
Table of Contents (9 chapters)
Data Binding, Events, and Computed Properties

Data is the most valuable asset in the world right now, and knowing how to manage it is a must. In Vue, we have the power to choose how we can gather this data, manipulate it as we want, and deliver it to the server.

In this chapter, we will learn more about the process of data manipulation and data handling, form validations, data filtering, how to display this data to the user, and how to present it in a way that is different from what we have inside our application.

We will learn how to use various vue-devtools so that we can go deep inside the Vue components and see what is happening to our data and application.

In this chapter, we'll cover the following recipes:

  • Creating your first project with the Vue CLI
  • Creating the hello world component
  • Creating an input form with two-way data binding
  • Adding an event listener to an element
  • Removing the v-model directive from the input
  • Creating a dynamic to-do list
  • Creating computed properties and understanding how they work
  • Displaying cleaner data and text with custom filters
  • Creating filters and sorters for a list
  • Creating conditional filters to sort list data
  • Adding custom styles and transitions
  • Using vue-devtools to debug your application

Let's get started!