Creating Custom Application Components and Layouts | 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

Creating Custom Application Components and Layouts

To start the development of our application, we will need to create the custom components and inputs that will be used by the entire application. These components will be created with a stateless approach.

We will develop the UsernameInput component, the PasswordInput component, the EmailInput component, and the AvatarInput component. We will also develop the base layout for the application pages and the chat layout, which will wrap the chat page.

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