Cover image for Front-End Development Projects with Vue.js

Front-End Development Projects with Vue.js

Release Date: 2020/11/01
ISBN: 9781838984823
Topic:
0%
18
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Get to grips with the core fundamentals of Vue.js 2 and learn to build reliable component-based applications with practical guidance from industry experts

Key Features

  • Learn how to make the best use of the Vue.js 2 framework and build a full end-to-end project
  • Build dynamic components and user interfaces that are fast and intuitive
  • Write performant code that “just works” and is easily scalable and reusable

Book Description

Are you looking to use Vue 2 for web applications, but don't know where to begin? Front-End Development Projects with Vue.js will help build your development toolkit and get ready to tackle real-world web projects. You'll get to grips with the core concepts of this JavaScript framework with practical examples and activities.

Through the use-cases in this book, you'll discover how to handle data in Vue components, define communication interfaces between components, and handle static and dynamic routing to control application flow. You'll get to grips with Vue CLI and Vue DevTools, and learn how to handle transition and animation effects to create an engaging user experience. In chapters on testing and deploying to the web, you'll gain the skills to start working like an experienced Vue developer and build professional apps that can be used by other people.

You'll work on realistic projects that are presented as bitesize exercises and activities, allowing you to challenge yourself in an enjoyable and attainable way. These mini projects include a chat interface, a shopping cart and price calculator, a to-do app, and a profile card generator for storing contact details.

By the end of this book, you'll have the confidence to handle any web development project and tackle real-world front-end development problems.

What you will learn

  • Set up a development environment and start your first Vue 2 project
  • Modularize a Vue application using component hierarchies
  • Use external JavaScript libraries to create animations
  • Share state between components and use Vuex for state management
  • Work with APIs using Vuex and Axios to fetch remote data
  • Validate functionality with unit testing and end-to-end testing
  • Get to grips with web app deployment

Who this book is for

This book is designed for Vue.js beginners. Whether this is your first JavaScript framework, or if you're already familiar with React or Angular, this book will get you on the right track. To understand the concepts explained in this book, you must be familiar with HTML, CSS, JavaScript, and Node package management.

Table of Contents

  1. Front-End Development Projects with Vue.js
  2. Preface
    1. About the Book
    2. About the Authors
    3. Who This Book Is For
    4. About the Chapters
    5. Conventions
    6. Before You Begin
    7. Minimum Hardware Recommendations for Running Node.js Applications
    8. Installing Node.js
    9. Installing Git
    10. Installing Yarn
    11. Installing Vue.js CLI (the Vue Command-Line Interface)
    12. Installing Visual Studio Code (Editor/IDE)
    13. Installing the Code Bundle
    14. Get in Touch
    15. Please Leave a Review
  3. 1. Starting Your First Vue Project
    1. Introduction
    2. Angular versus Vue
    3. React versus Vue
    4. Advantages of Using Vue for Your Project
    5. The Vue Instance in a Simple Vue Application
    6. A Webpack Vue Application
    7. Vue Single-Page Components
    8. Data Properties (Props)
    9. Exercise 1.01: Building Your First Component
    10. Data Binding Syntax Using Interpolation
    11. Exercise 1.02: Interpolation with Conditionals
    12. Styling Components
    13. Exercise 1.03: Importing SCSS into a Scoped Component
    14. CSS Modules
    15. Exercise 1.04: Style Vue Components Using CSS Modules
    16. Exercise 1.05: Writing a Component Template in PUG (HAML)
    17. Vue Directives
    18. Exercise 1.06: Basic Directives (v-text, v-once, v-html, v-bind, v-if, v-show)
    19. Two-Way Binding Using v-model
    20. Exercise 1.07: Two-Way Binding Using v-model
    21. Anonymous Loops
    22. Exercise 1.08: Using v-for to Loop Over an Array of Strings
    23. Iterating over Objects
    24. Exercise 1.09: Using a v-for Loop over an Array of Objects and Using Their Properties for v-if Conditions
    25. Methods in Vue
    26. Exercise 1.10: Triggering Methods
    27. Exercise 1.11: Returning Data Using Vue Methods
    28. Vue Lifecycle Hooks
    29. Exercise 1.12: Using Vue Lifecycles for Controlling Data
    30. Activity 1.01: Building a Dynamic Shopping List App Using Vue.js
    31. Summary
  4. 2. Working with Data
    1. Introduction
    2. Computed Properties
    3. Exercise 2.01: Implementing Computed Data into a Vue Component
    4. Computed Setters
    5. Exercise 2.02: Using Computed Setters
    6. Watchers
    7. Exercise 2.03: Using Watchers to Set New Values
    8. Deep Watching Concepts
    9. Exercise 2.04: Watching Nested Properties of a Data Object
    10. Methods versus Watchers versus Computed Props
    11. Exercise 2.05: Handling Search Functionality Using a Vue Method, a Watcher, and Computed Props
    12. Async Methods and Data Fetching
    13. Exercise 2.06: Using Asynchronous Methods to Retrieve Data from an API
    14. Activity 2.01: Creating a Blog List Using the Contentful API
    15. Summary
  5. 3. Vue CLI
    1. Introduction
    2. Using Vue CLI
    3. Exercise 3.01: Setting up a Project Using Vue CLI
    4. Vue Prototyping
    5. Getting Started with Prototyping
    6. Defining Your Own Entry Point
    7. Building a Prototype for Production
    8. Exercise 3.02: Instant Prototyping Using Vue CLI
    9. The Vue-UI
    10. Exercise 3.03: Creating and Building a New Project from the Vue-UI
    11. Vue.js DevTools
    12. Exercise 3.04: Debugging a Vue Application Using DevTools
    13. Activity 3.01: Building a Vue Application Using the Vue-UI and the Vuetify Component Library
    14. Summary
  6. 4. Nesting Components (Modularity)
    1. Introduction
    2. Passing Props
    3. Defining a Simple Component That Takes Props
    4. Rendering a Component with Props
    5. Component Registration Tricks
    6. Exercise 4.01: Implementing a Greeting Component
    7. Dynamic Props with Data Binding
    8. Exercise 4.02: Passing Props That Change Over Time
    9. Prop Typing and Validation
    10. Primitive Prop Validation
    11. Union and Custom Prop Types
    12. Custom Validation of Arrays, Object Shapes, and More with Validators
    13. Required Props
    14. Defaulting Props
    15. Exercise 4.03: Validating an Object Property
    16. Slots, Named Slots, and Scoped Slots
    17. Passing Markup to Be Rendered in a Child Component
    18. Using Named Slots to Delegate Rendering of Multiple Sections
    19. Using Scoped Slots to Wrap Prop Passing Logic
    20. Exercise 4.04: Implementing a Card Component Using Named Slots
    21. Template Logic Sharing with Filters
    22. Exercise 4.05: Implementing an Ellipsis Filter
    23. Vue.js refs
    24. Exercise 4.06: Wrapping Countable.js with Vue.js
    25. Vue.js Events for Child-Parent Communication
    26. Activity 4.01: A Local Message View with Reusable Components
    27. Summary
  7. 5. Global Component Composition
    1. Introduction
    2. Mixins
    3. Exercise 5.01: Creating Your Own Mixin
    4. Plugins
    5. Exercise 5.02: Creating a Custom Axios Plugin
    6. Globally Registering Components
    7. Maximizing Component Flexibility
    8. Using Vue.js Components without a .vue Single-File Component
    9. Runtime Definition with a String Template
    10. The render Function
    11. JSX
    12. The Vue component Tag
    13. Rendering Dynamic Components by Name or Component Reference
    14. Caching a Dynamic Component State with Keep-Alive
    15. Exercise 5.03: Creating a Dynamic Card Layout with the component Tag
    16. Functional Components
    17. Activity 5.01: Building a Vue.js Application with Plugins and Reusable Components
    18. Summary
  8. 6. Routing
    1. Introduction
    2. Vue Router
    3. Setting Up Vue Router
    4. The router-view Element
    5. Using Props to Define the Entry Point of an Application
    6. Setting Up Vue Router for Vue to Use
    7. Defining the Routes
    8. Tips on Loading Components for Route Configuration
    9. Setting up the Router Instance
    10. routes
    11. mode
    12. base
    13. Exercise 6.01: Implementing and Adding a Message Feed Page Using Vue Router
    14. Setting up Navigation Links
    15. Tip to Implement the Back Button
    16. Exercise 6.02: Adding the Navigation Link to the MessageFeed Route
    17. Passing Route Parameters
    18. Decoupling Params with Props
    19. Exercise 6.03: Passing the Content of the Selected Message to a New Message Page and Having It Printed Out
    20. Router Hooks
    21. Setting up beforeEach Hooks
    22. Differentiating Between the beforeEach and beforeResolve Hooks
    23. The afterEach Hook
    24. Personalizing Hooks per Route
    25. Setting up in-Component Hooks
    26. Exercise 6.04: Extracting a Messages List to an External File and Loading It Only When MessageFeed Is in View
    27. Dynamic Routing
    28. Catching Error Paths
    29. Exercise 6.05: Implementing a Message Route for Each Message with a Dynamic Routing Pattern
    30. Nested Routes
    31. Exercise 6.06: Building Navigation Tabs within the Message View
    32. Using Layouts
    33. Activity 6.01: Creating a Message SPA with Dynamic, Nested Routing, and Layouts
    34. Summary
  9. 7. Animations and Transitions
    1. Introduction
    2. Vue Transitions
    3. Transition Elements
    4. Transition Classes
    5. Animation for a Component
    6. Custom Transition Classes
    7. JavaScript Hooks
    8. Exercise 7.01: Adding a New Message with an Animation Effect
    9. Transition Groups
    10. Creating a Moving Effect While Transitioning a List
    11. Making an Animation on Initial Render
    12. Exercise 7.02: Sorting a List of Messages with an Animation
    13. Transition Routes
    14. Exercise 7.03: Creating a Transition Effect for Each Route Navigated
    15. Using the GSAP Library for Animation
    16. Installing GSAP
    17. Basic tweens
    18. Exercise 7.04: Tweens with GSAP
    19. Modifying the Look and Feel with Easing
    20. Modifying the Look and Feel with Stagger
    21. Using Timeline
    22. Activity 7.01: Building a Messages App with Transition and GSAP
    23. Summary
  10. 8. The State of Vue.js State Management
    1. Introduction
    2. Holding State in a Common Ancestor Component
    3. Exercise 8.01: Adding an Occupation Field to the Profile Card Generator
    4. Exercise 8.02: Adding a Clear Button to the Profile Card Generator
    5. The Event Bus
    6. Exercise 8.03: Moving the Clear Button to the Application Header Profile Card Generator
    7. Using the Vuex Pattern in Contrast with Other Patterns Such as Redux
    8. Exercise 8.04: Adding an Organization Field to the Profile Generator
    9. Activity 8.01: Adding Email and Phone Number to a Profile Card Generator
    10. When to Use Local State and When to Save to Global State
    11. Summary
  11. 9. Working with Vuex – State, Getters, Actions, and Mutations
    1. Introduction
    2. Store
    3. State
    4. Getters
    5. Mutations
    6. Actions
    7. Modules
    8. Installing Vuex
    9. Working with State
    10. Exercise 9.01: Displaying State Values
    11. Applying Getters
    12. Exercise 9.02: Adding Getters to a Vuex Store
    13. Getters with Parameters
    14. Exercise 9.03: Employing a Getter with Parameters
    15. Modifying State with Mutations
    16. Exercise 9.04: Working with Mutations
    17. Using Actions for Asynchronous State Changes
    18. Exercise 9.05: Using Actions for Asynchronous Logic
    19. Simplifying with mapState and mapGetters
    20. Exercise 9.06: Adding mapState and mapGetters
    21. Simplifying with mapMutations and mapActions
    22. Activity 9.01: Creating a Simple Shopping Cart and Price Calculator
    23. Summary
  12. 10. Working with Vuex – Fetching Remote Data
    1. Introduction
    2. Installation of Axios
    3. Exercise 10.01: Using Axios to Load Data from an API
    4. Using Defaults with Axios
    5. Using Axios with Vuex
    6. Exercise 10.02: Working with Axios in Vuex
    7. Activity 10.01: Using Axios and Vuex with Authentication
    8. Summary
  13. 11. Working with Vuex – Organizing Larger Stores
    1. Introduction
    2. Approach One – Using File Splitting
    3. Exercise 11.01: Using File Splitting
    4. Approach Two – Using Modules
    5. Exercise 11.02: Making Use of Modules
    6. Other Approaches to Organizing Your Vuex Stores
    7. Vuex Pathify
    8. Vuex Module Generator (VMG)
    9. Vuex ORM
    10. Activity 11.01: Simplifying a Vuex Store
    11. Summary
  14. 12. Unit Testing
    1. Introduction
    2. Why We Need to Test Code
    3. Understanding Different Types of Testing
    4. Your First Test
    5. Testing Components
    6. Exercise 12.01: Building and Unit Testing a Tag List Component
    7. Testing Methods, Filters and Mixins
    8. Exercise 12.02: Building and Testing an ellipsis Filter
    9. Testing Vue Routing
    10. Exercise 12.03: Building a Tag Page and Testing Its Routing
    11. Testing Vuex
    12. Exercise 12.04: Building and Testing a Cookie Disclaimer Banner (Vuex)
    13. Snapshot Testing
    14. Activity 12.01: Adding a Simple Search by Title Page with Tests
    15. Summary
  15. 13. End-to-End Testing
    1. Introduction
    2. Understanding E2E Testing and Its Use Cases
    3. Configuring Cypress for a Vue.js Application
    4. Using Cypress to Interact with and Inspect a Vue.js UI
    5. Exercise 13.01: Adding a "New Comment" Button and Corresponding E2E Test
    6. Triggering and Waiting for UI Updates with Cypress
    7. Exercise 13.02: Adding New Comment Editor Input and Submit Functionality
    8. Exercise 13.03: Adding a Submitting State to the New Comment Editor
    9. Intercepting HTTP Requests
    10. Exercise 13.04: POST Comment to API on Submission
    11. Visual Regression Testing with Cypress Snapshots
    12. Activity 13.01: Adding the Ability to Set a User's Email and Tests
    13. Summary
  16. 14. Deploying Your Code to the Web
    1. Introduction
    2. The Benefits of CI/CD as Part of an Agile Software Development Process
    3. Building for Production
    4. Using GitLab CI/CD to Test Your Code
    5. Exercise 14.01: Adding a Lint Step to Your GitLab CI/CD Pipeline
    6. Deploying to Netlify
    7. Exercise 14.02: Deploying a Site to Netlify from GitHub
    8. Deploying to AWS Using S3 and CloudFront
    9. Exercise 14.03: Deploying to S3 from GitLab CI/CD
    10. Activity 14.01: Adding CI/CD with GitLab to a Book Search App and Deploying to Amazon S3 and CloudFront
    11. Summary
  17. Appendix
    1. 1. Starting Your First Vue Project
    2. Activity 1.01: Building a Dynamic Shopping List App Using Vue.js
    3. 2. Working with Data
    4. Activity 2.01: Creating a Blog List Using the Contentful API
    5. 3. Vue CLI
    6. Activity 3.01: Building a Vue Application Using the Vue-UI and the Vuetify Component Library
    7. 4. Nesting Components (Modularity)
    8. Activity 4.01: A Local Message View with Reusable Components
    9. 5. Global Component Composition
    10. Activity 5.01: Building a Vue.js Application with Plugins and Reusable Components
    11. 6. Routing
    12. Activity 6.01: Creating a Message SPA with Dynamic, Nested Routing, and Layouts
    13. 7. Animations and Transitions
    14. Activity 7.01: Building a Messages App with Transition and GSAP
    15. 8. The State of Vue.js State Management
    16. Activity 8.01: Adding Email and Phone Number to a Profile Card Generator
    17. 9. Working with Vuex – State, Getters, Actions, and Mutations
    18. Activity 9.01: Creating a Simple Shopping Cart and Price Calculator
    19. 10. Working with Vuex – Fetching Remote Data
    20. Activity 10.01: Using Axios and Vuex with Authentication
    21. 11. Working with Vuex – Organizing Larger Stores
    22. Activity 11.01: Simplifying a Vuex Store
    23. 12. Unit Testing
    24. Activity 12.01: Adding a Simple Search by Title Page with Tests
    25. 13. End-to-End Testing
    26. Activity 13.01: Adding the Ability to Set a User's Email and Tests
    27. 14. Deploying Your Code to the Web
    28. Activity 14.01: Adding CI/CD with GitLab to a Book Search App and Deploying to Amazon S3 and CloudFront
3.17.6.75