Building Vue.js Applications with GraphQL

Building Vue.js Applications with GraphQL

by Heitor Ramon Ribeiro
Released January 2021
Publisher(s): Packt Publishing
ISBN: 9781800565074

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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.

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
      1. Download the example code files
      2. Conventions used
    4. Sections
      1. Getting ready
      2. How to do it…
      3. How it works…
      4. There's more…
      5. See also
    5. Get in touch
      1. Reviews
  6. Data Binding, Events, and Computed Properties
    1. Technical requirements
    2. Creating your first project with the Vue CLI
      1. Getting ready
      2. How to do it...
      3. There's more...
      4. See also
    3. Creating the hello world component
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    4. Creating an input form with two-way data binding
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    5. Adding an event listener to an element
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    6. Removing the v-model directive from the input
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    7. Creating a dynamic to-do list
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    8. Creating computed properties and understanding how they work
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    9. Displaying cleaner data and text with custom filters
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    10. Creating filters and sorters for a list
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    11. Creating conditional filters to sort list data
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    12. Adding custom styles and transitions
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    13. Using vue-devtools to debug your application
      1. Getting ready
      2. How to do it...
      3. See also
  7. Components, Mixins, and Functional Components
    1. Technical requirements
    2. Creating a visual template component
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    3. Using slots and named slots to place data inside your components
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    4. Passing data to your component and validating the data
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    5. Creating functional components
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    6. Accessing your children component's data
      1. Getting ready
      2. How to do it...
        1. Creating the star rating input
        2. Creating the StarRatingDisplay component
        3. Creating the StarRating component
        4. Data manipulation on child components
      3. How it works...
      4. There's more...
      5. See also
    7. Creating a dynamically injected component
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    8. Creating a dependency injection component
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    9. Creating a component mixin
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    10. Lazy loading your components
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
  8. Setting Up Our Chat App - AWS Amplify Environment and GraphQL
    1. Technical requirements
    2. Creating your AWS Amplify environment
      1. Getting ready
      2. How to do it...
        1. Creating an AWS account
        2. Configuring AWS Amplify
        3. Creating your Quasar project
        4. Initializing the AWS Amplify project
      3. How it works...
      4. See also
    3. Creating your first GraphQL API
      1. Getting ready
      2. How to do it...
        1. Creating the AWS Cognito authentication
        2. Creating the GraphQL API
          1. Creating the GraphQL SDL schema
          2. Creating the GraphQL API with AWS Amplify
      3. How it works...
      4. See also
    4. Adding the GraphQL client to your application
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    5. Creating the AWS Amplify driver for your application
      1. Getting ready
      2. How to do it...
        1. Creating the AWS Amplify Storage driver
          1. Adding AWS Amplify Storage
          2. Creating the Amplify Storage driver
        2. Creating the Amplify Auth driver
        3. Creating the Amplify AppSync instance
      3. How it works...
      4. See also
  9. Creating Custom Application Components and Layouts
    1. Technical requirements
    2. Creating custom inputs for the application
      1. Getting ready
      2. How to do it...
        1. Creating the UsernameInput component
          1. The single file component section
          2. The single file component section
        2. Creating a PasswordInput component
          1. The single file component section
          2. The single file component section
        3. Creating the NameInput component
          1. The single file component section
          2. The single file component section
        4. Creating the EmailInput Component
          1. The single file component section
          2. The single file component section
        5. Creating the AvatarInput component
          1. The single file component section
          2. The single file component section
        6. Creating the avatar mixin
        7. Creating the AvatarDisplay component
          1. The single file component section
          2. The single file component section
      3. How it works...
      4. See also
    3. Creating the application layouts
      1. Getting ready
      2. How to do it...
        1. Creating the base layout
          1. The single file component section
          2. The single file component section
        2. Creating the chat layout
          1. The single file component section
          2. The single file component section
      3. How it works...
      4. See also
  10. Creating the User Vuex Module, Pages, and Routes
    1. Technical requirements
    2. Creating the User Vuex module in your application
      1. Getting ready
      2. How to do it...
        1. Creating the User Vuex state
        2. Creating the User Vuex mutations
        3. Creating the User Vuex getters
        4. Creating the User Vuex actions
        5. Adding the User module to Vuex
      3. How it works...
      4. See also
    3. Creating User pages and routes for your application
      1. Getting ready
      2. How to do it...
        1. Adding the Dialog plugin to Quasar
        2. Creating the User login page
          1. Single-file component section
          2. Single-file component section
        3. Creating the User signup page
          1. Single-file component section
          2. Single-file component section
        4. Creating the User validation page
          1. Single-file component section
          2. Single-file component section
        5. Creating the User edit page
          1. Single-file component section
          2. Single-file component section
        6. Creating application routes
        7. Adding the authentication guard
      3. How it works...
      4. There's more...
      5. See also
  11. Creating Chat and Message Vuex, Pages, and Routes
    1. Technical requirements
    2. Creating GraphQL queries and fragments
      1. Getting ready
      2. How to do it...
        1. Creating the GraphQL fragments
        2. Applying fragments on the User Vuex actions
      3. How it works...
      4. See also
    3. Creating the Chat Vuex module on your application
      1. Getting ready
      2. How to do it...
        1. Creating the Chat Vuex state
        2. Creating the Chat Vuex mutations
        3. Creating the Chat Vuex getters
        4. Creating the Chat Vuex actions
        5. Adding the Chat module to Vuex
      3. How it works...
      4. See also
    4. Creating the Contacts page of your application
      1. Getting ready
      2. How to do it...
        1. Creating the NewConversation component
          1. Single file component section
          2. Single-file component section
        2. Creating the Contacts page
          1. Single-file component section
          2. Single-file component section
      3. How it works...
      4. See also
    5. Creating the Messages page of your application
      1. Getting ready
      2. How to do it...
        1. Creating the ChatInput component
          1. Single-file component section
          2. Single-file component section
        2. Creating the Messages layout
          1. Single-file component section
          2. Single-file component section
        3. Changing the application routes
        4. Creating the Messages page
          1. Single-file component section
          2. Single-file component section
      3. How it works...
      4. See also
  12. Transforming Your App into a PWA and Deploying to the Web
    1. Technical requirements
    2. Transforming the application into a PWA
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    3. Creating the application update notification
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    4. Adding a custom PWA installation notification on iOS
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    5. Creating the production environment and deploying
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. 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