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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Data Binding, Events, and Computed Properties

Data Binding, Events, and Computed Properties

Technical requirements

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

Free Chapter

Components, Mixins, and Functional Components

Components, Mixins, and Functional Components

Technical requirements

Creating a visual template component

Using slots and named slots to place data inside your components

Passing data to your component and validating the data

Creating functional components

Accessing your children component's data

Creating a dynamically injected component

Creating a dependency injection component

Creating a component mixin

Lazy loading your components

Setting Up Our Chat App - AWS Amplify Environment and GraphQL

Setting Up Our Chat App - AWS Amplify Environment and GraphQL

Technical requirements

Creating your AWS Amplify environment

Creating your first GraphQL API

Adding the GraphQL client to your application

Creating the AWS Amplify driver for your application

Creating Custom Application Components and Layouts

Creating Custom Application Components and Layouts

Technical requirements

Creating custom inputs for the application

Creating the application layouts

Creating the User Vuex Module, Pages, and Routes

Creating the User Vuex Module, Pages, and Routes

Technical requirements

Creating the User Vuex module in your application

Creating User pages and routes for your application

Creating Chat and Message Vuex, Pages, and Routes

Creating Chat and Message Vuex, Pages, and Routes

Technical requirements

Creating GraphQL queries and fragments

Creating the Chat Vuex module on your application

Creating the Contacts page of your application

Creating the Messages page of your application

Transforming Your App into a PWA and Deploying to the Web

Transforming Your App into a PWA and Deploying to the Web

Technical requirements

Transforming the application into a PWA

Creating the application update notification

Adding a custom PWA installation notification on iOS

Creating the production environment and deploying

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packt.com.