Building Vue.js Applications with GraphQL

Book description

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 Framework

Key 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 Framework

Book Description

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.

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 web

Who this book is for

This 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.

Publisher resources

Download Example Code

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Building Vue.js Applications with GraphQL
  3. About Packt
    1. Why subscribe?
  4. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Conventions used
    6. Sections
    7. Getting ready
    8. How to do it…
    9. How it works…
    10. There's more…
    11. See also
    12. Get in touch
    13. Reviews
  6. Data Binding, Events, and Computed Properties
    1. Technical requirements
    2. Creating your first project with the Vue CLI
    3. Getting ready
    4. How to do it...
    5. There's more...
    6. See also
    7. Creating the hello world component
    8. Getting ready
    9. How to do it...
    10. How it works...
    11. See also
    12. Creating an input form with two-way data binding
    13. Getting ready
    14. How to do it...
    15. How it works...
    16. See also
    17. Adding an event listener to an element
    18. Getting ready
    19. How to do it...
    20. How it works...
    21. See also
    22. Removing the v-model directive from the input
    23. Getting ready
    24. How to do it...
    25. How it works...
    26. See also
    27. Creating a dynamic to-do list
    28. Getting ready
    29. How to do it...
    30. How it works...
    31. See also
    32. Creating computed properties and understanding how they work
    33. Getting ready
    34. How to do it...
    35. How it works...
    36. See also
    37. Displaying cleaner data and text with custom filters
    38. Getting ready
    39. How to do it...
    40. How it works...
    41. See also
    42. Creating filters and sorters for a list
    43. Getting ready
    44. How to do it...
    45. How it works...
    46. See also
    47. Creating conditional filters to sort list data
    48. Getting ready
    49. How to do it...
    50. How it works...
    51. See also
    52. Adding custom styles and transitions
    53. Getting ready
    54. How to do it...
    55. How it works...
    56. See also
    57. Using vue-devtools to debug your application
    58. Getting ready
    59. How to do it...
    60. See also
  7. Components, Mixins, and Functional Components
    1. Technical requirements
    2. Creating a visual template component
    3. Getting ready
    4. How to do it...
    5. How it works...
    6. See also
    7. Using slots and named slots to place data inside your components
    8. Getting ready
    9. How to do it...
    10. How it works...
    11. See also
    12. Passing data to your component and validating the data
    13. Getting ready
    14. How to do it...
    15. How it works...
    16. See also
    17. Creating functional components
    18. Getting ready
    19. How to do it...
    20. How it works...
    21. See also
    22. Accessing your children component's data
    23. Getting ready
    24. How to do it...
    25. Creating the star rating input
    26. Creating the StarRatingDisplay component
    27. Creating the StarRating component
    28. Data manipulation on child components
    29. How it works...
    30. There's more...
    31. See also
    32. Creating a dynamically injected component
    33. Getting ready
    34. How to do it...
    35. How it works...
    36. See also
    37. Creating a dependency injection component
    38. Getting ready
    39. How to do it...
    40. How it works...
    41. See also
    42. Creating a component mixin
    43. Getting ready
    44. How to do it...
    45. How it works...
    46. See also
    47. Lazy loading your components
    48. Getting ready
    49. How to do it...
    50. How it works...
    51. See also
  8. Setting Up Our Chat App - AWS Amplify Environment and GraphQL
    1. Technical requirements
    2. Creating your AWS Amplify environment
    3. Getting ready
    4. How to do it...
    5. Creating an AWS account
    6. Configuring AWS Amplify
    7. Creating your Quasar project
    8. Initializing the AWS Amplify project
    9. How it works...
    10. See also
    11. Creating your first GraphQL API
    12. Getting ready
    13. How to do it...
    14. Creating the AWS Cognito authentication
    15. Creating the GraphQL API
    16. Creating the GraphQL SDL schema
    17. Creating the GraphQL API with AWS Amplify
    18. How it works...
    19. See also
    20. Adding the GraphQL client to your application
    21. Getting ready
    22. How to do it...
    23. How it works...
    24. See also
    25. Creating the AWS Amplify driver for your application
    26. Getting ready
    27. How to do it...
    28. Creating the AWS Amplify Storage driver
    29. Adding AWS Amplify Storage
    30. Creating the Amplify Storage driver
    31. Creating the Amplify Auth driver
    32. Creating the Amplify AppSync instance
    33. How it works...
    34. See also
  9. Creating Custom Application Components and Layouts
    1. Technical requirements
    2. Creating custom inputs for the application
    3. Getting ready
    4. How to do it...
    5. Creating the UsernameInput component
    6. The single file component section
    7. The single file component section
    8. Creating a PasswordInput component
    9. The single file component section
    10. The single file component section
    11. Creating the NameInput component
    12. The single file component section
    13. The single file component section
    14. Creating the EmailInput Component
    15. The single file component section
    16. The single file component section
    17. Creating the AvatarInput component
    18. The single file component section
    19. The single file component section
    20. Creating the avatar mixin
    21. Creating the AvatarDisplay component
    22. The single file component section
    23. The single file component section
    24. How it works...
    25. See also
    26. Creating the application layouts
    27. Getting ready
    28. How to do it...
    29. Creating the base layout
    30. The single file component section
    31. The single file component section
    32. Creating the chat layout
    33. The single file component section
    34. The single file component section
    35. How it works...
    36. See also
  10. Creating the User Vuex Module, Pages, and Routes
    1. Technical requirements
    2. Creating the User Vuex module in your application
    3. Getting ready
    4. How to do it...
    5. Creating the User Vuex state
    6. Creating the User Vuex mutations
    7. Creating the User Vuex getters
    8. Creating the User Vuex actions
    9. Adding the User module to Vuex
    10. How it works...
    11. See also
    12. Creating User pages and routes for your application
    13. Getting ready
    14. How to do it...
    15. Adding the Dialog plugin to Quasar
    16. Creating the User login page
    17. Single-file component section
    18. Single-file component section
    19. Creating the User signup page
    20. Single-file component section
    21. Single-file component section
    22. Creating the User validation page
    23. Single-file component section
    24. Single-file component section
    25. Creating the User edit page
    26. Single-file component section
    27. Single-file component section
    28. Creating application routes
    29. Adding the authentication guard
    30. How it works...
    31. There's more...
    32. See also
  11. Creating Chat and Message Vuex, Pages, and Routes
    1. Technical requirements
    2. Creating GraphQL queries and fragments
    3. Getting ready
    4. How to do it...
    5. Creating the GraphQL fragments
    6. Applying fragments on the User Vuex actions
    7. How it works...
    8. See also
    9. Creating the Chat Vuex module on your application
    10. Getting ready
    11. How to do it...
    12. Creating the Chat Vuex state
    13. Creating the Chat Vuex mutations
    14. Creating the Chat Vuex getters
    15. Creating the Chat Vuex actions
    16. Adding the Chat module to Vuex
    17. How it works...
    18. See also
    19. Creating the Contacts page of your application
    20. Getting ready
    21. How to do it...
    22. Creating the NewConversation component
    23. Single file component section
    24. Single-file component section
    25. Creating the Contacts page
    26. Single-file component section
    27. Single-file component section
    28. How it works...
    29. See also
    30. Creating the Messages page of your application
    31. Getting ready
    32. How to do it...
    33. Creating the ChatInput component
    34. Single-file component section
    35. Single-file component section
    36. Creating the Messages layout
    37. Single-file component section
    38. Single-file component section
    39. Changing the application routes
    40. Creating the Messages page
    41. Single-file component section
    42. Single-file component section
    43. How it works...
    44. See also
  12. Transforming Your App into a PWA and Deploying to the Web
    1. Technical requirements
    2. Transforming the application into a PWA
    3. Getting ready
    4. How to do it...
    5. How it works...
    6. See also
    7. Creating the application update notification
    8. Getting ready
    9. How to do it...
    10. How it works...
    11. See also
    12. Adding a custom PWA installation notification on iOS
    13. Getting ready
    14. How to do it...
    15. How it works...
    16. See also
    17. Creating the production environment and deploying
    18. Getting ready
    19. How to do it...
    20. How it works...
    21. See also
  13. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Building Vue.js Applications with GraphQL
  • Author(s): Heitor Ramon Ribeiro
  • Release date: January 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781800565074