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

Content preview from Building Vue.js Applications with GraphQL

Other Books You May Enjoy

If you enjoyed this book, you may be interested in these other books by Packt:

Vue.js 3 Cookbook Heitor Ribeiro

ISBN: 978-1-83882-622-2

Design and develop large-scale web applications using Vue.js 3’s latest features
Create impressive UI layouts and pages using Vuetify, Buefy, and Ant Design
Extend your Vue.js applications with dynamic form and custom rules validation
Add state management, routing, and navigation to your web apps
Discover effective techniques to deploy your web applications with Netlify
Develop web applications, mobile applications, and desktop applications with a single code base using the Quasar ...

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

Building Vue.js Applications with GraphQL

by Heitor Ramon Ribeiro

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.