Transforming Your App into a PWA and Deploying to the Web | Building Vue.js Applications with GraphQL

Book Overview & Buying
Table Of Contents

Building Vue.js Applications with GraphQL

By : Heitor Ramon Ribeiro

3.8 (11)

Buy this Book

Building Vue.js Applications with GraphQL

3.8 (11)

By: Heitor Ramon Ribeiro

Buy this Book

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

Sections

Get in touch

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

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

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

Technical requirements

Creating custom inputs for the application

Creating the application layouts

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

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

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

Leave a review - let other readers know what you think

Transforming Your App into a PWA and Deploying to the Web

When we are done coding, it's time to finish our application and make it ready to be released. Now that our custom chat application is working with the Amplify services for the backend and Quasar and Vue for the frontend, we are ready to get up and running on the web.

In this chapter, you will learn how to transform your application into a Progressive Web App (PWA), add some events on the service worker to notify the user of new versions of your application, create a custom banner for installation on iOS devices, and finally deploy the application.

So, in this chapter, we will cover the following recipes: