Building Vue.js Applications with GraphQL

Heitor Ramon Ribeiro

• Publisher: Packt Publishing
• Year: 2021
• eBook ISBN: 9781800561748
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Programming
• Index: Computer Science

Take your Vue.js knowledge to the next level by understanding full-stack development concepts and exploring modern web technologies such as AWS Amplify, GraphQL, and Quasar FrameworkKey Features• Build a fully functional Vue.js web app and learn how it integrates with GraphQL• Transform your chat application into a Progressive Web Application (PWA) for web deployment• Discover practical recipes, exploring the capabilities of the GraphQL API for full-stack development using Quasar FrameworkBook DescriptionSince 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.What you will learn• Set up your Vue.js projects with Vue CLI and explore the power of Vue components• Discover steps to create functional components in Vue.js for faster rendering• Become familiar with AWS Amplify and learn how to set up your environment• Understand how to create your first GraphQL schema• Use Quasar Framework to create simple and effective interfaces• Discover effective techniques to create queries for interacting with data• Explore Vuex for adding state management capabilities to your app• Discover techniques to deploy your applications effectively to the webWho this book is forThis book is for intermediate-level Vue.js developers who want to take their first step toward full-stack development. Prior knowledge of Vue.js and JavaScript is required before getting started with this book.

Components, Mixins, and Functional Components

Building a Vue application is like putting a puzzle together. Each piece of the puzzle is a component, and each piece has a slot to fill.

Components play a big part in Vue development. In Vue, each part of your code will be a component – it could be a layout, a page, a container, or a button, but ultimately, it's a component. Learning how to interact with them and reuse them is the key to cleaning up code and performance in your Vue application. Components are the code that will, in the end, render something on the screen, whatever its size might be.

In this chapter, we will learn about how to make a visual component that can be reused in many places. We'll use slots to place data inside our components, create functional components for seriously fast rendering, implement direct communication between parent and child components, and look at loading our components asynchronously.

Then, we'll put all those pieces together and create a beautiful puzzle that's also a Vue application.

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

• 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 dynamic injected component
• Creating a dependency injection component
• Creating a mixin component
• Lazy loading your components

Let's get started!

Technical requirements

In this chapter, we will be using Node.js and Vue-CLI.

Attention Windows users: You need to install an npm package called windows-build-tools to be able to install the required packages. To do so, open PowerShell as an administrator and execute the > npm install -g windows-build-tools command.

To install the Vue CLI, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm install -g @vue/cli @vue/cli-service-global

Creating a visual template component

Components can be data-driven, stateless, stateful, or simple visual compone...

Table of contents

• Title Page
• Copyright and Credits
• About Packt
• Contributors
• Preface
• Data Binding, Events, and Computed Properties
• Components, Mixins, and Functional Components
• Setting Up Our Chat App - AWS Amplify Environment and GraphQL
• Creating Custom Application Components and Layouts
• Creating the User Vuex Module, Pages, and Routes
• Creating Chat and Message Vuex, Pages, and Routes
• Transforming Your App into a PWA and Deploying to the Web
• Other Books You May Enjoy