book

Building Vue.js Applications with GraphQL

Name: Building Vue.js Applications with GraphQL
Author: Heitor Ramon Ribeiro
ISBN: 9781800565074

by Heitor Ramon Ribeiro

January 2021

Intermediate to advanced

298 pages

4h 47m

English

Packt Publishing

Read now

Unlock full access

Title Page
Copyright and Credits
Building Vue.js Applications with GraphQL
About Packt
Why subscribe?
Contributors
About the authorAbout the reviewerPackt is searching for authors like you
Preface
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesConventions usedSectionsGetting readyHow to do it…How it works…There's more…See alsoGet in touchReviews
Data Binding, Events, and Computed Properties
Technical requirementsCreating your first project with the Vue CLIGetting readyHow to do it...There's more...See alsoCreating the hello world componentGetting readyHow to do it...How it works...See alsoCreating an input form with two-way data bindingGetting readyHow to do it...How it works...See alsoAdding an event listener to an elementGetting readyHow to do it...How it works...See alsoRemoving the v-model directive from the inputGetting readyHow to do it...How it works...See alsoCreating a dynamic to-do listGetting readyHow to do it...How it works...See alsoCreating computed properties and understanding how they workGetting readyHow to do it...How it works...See alsoDisplaying cleaner data and text with custom filtersGetting readyHow to do it...How it works...See alsoCreating filters and sorters for a listGetting readyHow to do it...How it works...See alsoCreating conditional filters to sort list dataGetting readyHow to do it...How it works...See alsoAdding custom styles and transitionsGetting readyHow to do it...How it works...See alsoUsing vue-devtools to debug your applicationGetting readyHow to do it...See also
Components, Mixins, and Functional Components
Technical requirementsCreating a visual template componentGetting readyHow to do it...How it works...See alsoUsing slots and named slots to place data inside your componentsGetting readyHow to do it...How it works...See alsoPassing data to your component and validating the dataGetting readyHow to do it...How it works...See alsoCreating functional componentsGetting readyHow to do it...How it works...See alsoAccessing your children component's dataGetting readyHow to do it...Creating the star rating inputCreating the StarRatingDisplay componentCreating the StarRating componentData manipulation on child componentsHow it works...There's more...See alsoCreating a dynamically injected componentGetting readyHow to do it...How it works...See alsoCreating a dependency injection componentGetting readyHow to do it...How it works...See alsoCreating a component mixinGetting readyHow to do it...How it works...See alsoLazy loading your componentsGetting readyHow to do it...How it works...See also
Setting Up Our Chat App - AWS Amplify Environment and GraphQL
Technical requirementsCreating your AWS Amplify environmentGetting readyHow to do it...Creating an AWS accountConfiguring AWS AmplifyCreating your Quasar projectInitializing the AWS Amplify projectHow it works...See alsoCreating your first GraphQL APIGetting readyHow to do it...Creating the AWS Cognito authenticationCreating the GraphQL APICreating the GraphQL SDL schemaCreating the GraphQL API with AWS AmplifyHow it works...See alsoAdding the GraphQL client to your applicationGetting readyHow to do it...How it works...See alsoCreating the AWS Amplify driver for your applicationGetting readyHow to do it...Creating the AWS Amplify Storage driverAdding AWS Amplify StorageCreating the Amplify Storage driverCreating the Amplify Auth driverCreating the Amplify AppSync instanceHow it works...See also
Creating Custom Application Components and Layouts
Technical requirementsCreating custom inputs for the applicationGetting readyHow to do it...Creating the UsernameInput componentThe single file component sectionThe single file component sectionCreating a PasswordInput componentThe single file component sectionThe single file component sectionCreating the NameInput componentThe single file component sectionThe single file component sectionCreating the EmailInput ComponentThe single file component sectionThe single file component sectionCreating the AvatarInput componentThe single file component sectionThe single file component sectionCreating the avatar mixinCreating the AvatarDisplay componentThe single file component sectionThe single file component sectionHow it works...See alsoCreating the application layoutsGetting readyHow to do it...Creating the base layoutThe single file component sectionThe single file component sectionCreating the chat layoutThe single file component sectionThe single file component sectionHow it works...See also
Creating the User Vuex Module, Pages, and Routes
Technical requirementsCreating the User Vuex module in your applicationGetting readyHow to do it...Creating the User Vuex stateCreating the User Vuex mutationsCreating the User Vuex gettersCreating the User Vuex actionsAdding the User module to VuexHow it works...See alsoCreating User pages and routes for your applicationGetting readyHow to do it...Adding the Dialog plugin to QuasarCreating the User login pageSingle-file component sectionSingle-file component sectionCreating the User signup pageSingle-file component sectionSingle-file component sectionCreating the User validation pageSingle-file component sectionSingle-file component sectionCreating the User edit pageSingle-file component sectionSingle-file component sectionCreating application routesAdding the authentication guardHow it works...There's more...See also

Creating Chat and Message Vuex, Pages, and Routes
Technical requirementsCreating GraphQL queries and fragmentsGetting readyHow to do it...Creating the GraphQL fragmentsApplying fragments on the User Vuex actionsHow it works...See alsoCreating the Chat Vuex module on your applicationGetting readyHow to do it...Creating the Chat Vuex stateCreating the Chat Vuex mutationsCreating the Chat Vuex gettersCreating the Chat Vuex actionsAdding the Chat module to VuexHow it works...See alsoCreating the Contacts page of your applicationGetting readyHow to do it...Creating the NewConversation componentSingle file component sectionSingle-file component sectionCreating the Contacts pageSingle-file component sectionSingle-file component sectionHow it works...See alsoCreating the Messages page of your applicationGetting readyHow to do it...Creating the ChatInput componentSingle-file component sectionSingle-file component sectionCreating the Messages layoutSingle-file component sectionSingle-file component sectionChanging the application routesCreating the Messages pageSingle-file component sectionSingle-file component sectionHow it works...See also
Transforming Your App into a PWA and Deploying to the Web
Technical requirementsTransforming the application into a PWAGetting readyHow to do it...How it works...See alsoCreating the application update notificationGetting readyHow to do it...How it works...See alsoAdding a custom PWA installation notification on iOSGetting readyHow to do it...How it works...See alsoCreating the production environment and deployingGetting readyHow to do it...How it works...See also
Other Books You May Enjoy
Leave a review - let other readers know what you think

Overview

In "Building Vue.js Applications with GraphQL", you will learn how to craft a full-stack chat application from scratch, utilizing the GraphQL API, Vue.js, and AWS Amplify. This recipe-oriented approach walks you through the essential tools and techniques, guiding you step-by-step to deploy a functional and versatile application. By the end, you'll master practical skills applicable to modern development challenges.

What this Book will help me do

You will understand how to build full-stack applications integrating Vue.js with GraphQL.
You will gain hands-on experience creating and deploying Progressive Web Applications (PWAs).
You will learn how to utilize AWS Amplify for backend infrastructure and AppSync for GraphQL APIs.
You will get proficiency in using the Quasar Framework to design user interfaces and layouts.
You will acquire skills in implementing Vuex for effective state management within applications.

Author(s)

Heitor Ramon Ribeiro, a seasoned software developer passionate about cutting-edge web technologies, authored this book. With years of experience working with Vue.js, Quasar, and cloud technologies like AWS, Heitor strives to make complex concepts accessible to developers of all levels. His writing style is educational and supportive, aiming to empower readers to build industry-ready applications with confidence.

Who is it for?

This book is aimed at intermediate-level web developers, especially those experienced with Vue.js and JavaScript, seeking to explore full-stack development. It is a perfect match for individuals looking to integrate GraphQL and modern web tools into their applications. If your goal is to enhance your tech stack with a technology like GraphQL, this book will guide you. The content is structured to provide step-by-step learning, making it accessible yet challenging for learners ready to advance their skills.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781800565074

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills