Frontend Development Projects with Vue.js 3: Learn the fundamentals of building scalable web applications and dynamic user interfaces with Vue.js, 2nd Edition

Frontend Development Projects with Vue.js 3
Contributors
About the authors
About the reviewer
Preface
    Who this book is for
    What this book covers
    To get the most out of this book
    Download the example code files
    Download the color images
    Conventions used
    Get in touch
    Share Your Thoughts
    Download a free PDF copy of this book
Part 1: Introduction and Crash Course
Chapter 1: Starting Your First Vue Project
    Technical requirements
    Understanding Vue as a framework
        Angular versus Vue
        React versus Vue
        Advantages of using Vue for your project
        Working with Vue
        Understanding the Vue instance
    Setting up a Vite-powered Vue application
        Vue’s SFC architecture
        Exercise 1.01 – building your first component
    Exploring data properties as a local state
    Writing components with script setup
        Exercise 1.02 – interpolation with conditionals
    Understanding Vue directives
        Exercise 1.03 – exploring basic directives (v-text, v-once, v-html, v-bind, v-if, v-show)
    Enabling two-way binding using v-model
        Exercise 1.04 – experimenting with two-way binding using v-model
    Understanding data iteration with v-for
        Basic iteration using v-for
        Exercise 1.05 – using v-for to iterate through an array of strings
        Iterating through an array of objects
        Exercise 1.06 – using v-for to iterate through an array of objects and using their properties in v-if conditions
        Iterating through a keyed collection (Object)
        Exercise 1.07 – using v-for to loop through the properties of Object
    Exploring methods
        Exercise 1.08 – triggering methods
        Exercise 1.09 – returning data using Vue methods
    Understanding component lifecycle hooks
        Exercise 1.10 – using a Vue lifecycle to control data
    Styling components
        Exercise 1.11 – importing SCSS into a scoped component
        Setting up state-driven dynamic CSS in Vue 3
    Understanding CSS modules
        Exercise 1.12 – styling Vue components using CSS modules
        Activity 1.01 – building a dynamic shopping list app using Vue
    Summary
Chapter 2: Working with Data
    Technical requirements
    Understanding computed properties
        Exercise 2.01 – implementing computed data into a Vue component
    Understanding computed setters
        Exercise 2.02 – using computed setters
    Exploring watchers
        Exercise 2.03 – using watchers to set new values
    Watching nested properties
        Exercise 2.04 – watching nested properties of a data object
    Exploring async methods and data fetching
        Exercise 2.05 – using asynchronous methods to retrieve data from an API
    Comparing methods, watchers, and computed properties
        Exercise 2.06 – handling the search functionality using a Vue method, a watcher, and computed props
        Activity 2.01 – creating a blog list using the Contentful API
    Summary
Chapter 3: Vite and Vue Devtools
    Technical requirements
    Using Vite
        Exercise 3.01 – setting up a Vue project
    Using Vue Devtools
        Components tab
        Timeline tab
        Exercise 3.02 – debugging a Vue application using Devtools
        Activity 3.01 – creating a Vue application with Pinia and Router using Vite
    Summary
Part 2: Building Your First Vue App
Chapter 4: Nesting Components (Modularity)
    Technical requirements
    Passing props
        Defining a simple component that accepts props
        Passing props to a component
        Exercise 4.01 – Implementing a Greeting component
        Binding reactive data to props
        Exercise 4.02 – Passing reactive data that changes frequently to props
    Understanding prop types and validation
        Primitive prop validation
        Understanding union and custom prop types
        Custom validation of arrays and objects
        Understanding required props
        Setting the default props value
        Registering props in <script setup> (setup hook)
        Exercise 4.03 – Validating an Object property
    Understanding slots, named slots, and scoped slots
        Passing markup to a component for rendering
        Using named slots to delegate rendering of multiple sections
        Using scoped slots to wrap prop-passing logic
        Exercise 4.04 – Implementing a card component using named slots
    Understanding Vue refs
        Exercise 4.05 – Wrapping Countable.js in Vue application
    Using events for child-parent communication
        Registering events with <script setup> (or setup hook)
        Activity 4.01 – A local message view with reusable components
    Summary
Chapter 5: The Composition API
    Technical requirements
    Creating components with the setup() lifecycle method
        Exercise 5.01 – creating a greeting component with setup()
        Creating a component with setup() and h()
        Exercise 5.02 – creating a dynamic greeting component with the setup() and h() functions
    Working with data
        Setting a reactive local state with ref()
        Setting a reactive local state with reactive()
        Exercise 5.03 – binding a component with ref() and reactive()
        Computing a reactive state from another local state with computed()
        Exercise 5.04 – implementing computed data with computed()
        Using watchers with watch()
        Exercise 5.05 – using watchers to set new values
    Understanding composable lifecycle functions
        Exercise 5.06 – using the lifecycle functions to control the data flow
    Creating your composable (custom hook)
        Exercise 5.07 – creating your first composable
        Activity 5.01 – creating a BlogView component with the Composition API
    Summary
Chapter 6: Global Component Composition
    Technical requirements
    Understanding mixins
        Exercise 6.01 – creating your mixin
    Understanding plugins
        Exercise 6.02 – creating a custom Axios plugin
    Globally registering components
        Using non-SFC Vue components
    Understanding components
        Rendering dynamic components by name or component reference
        Caching a dynamic component state with keep-alive
        Exercise 6.03 – creating a dynamic card layout with the component tag
    Writing functional components
        Activity 6.01 – building a Vue.js application with plugins and reusable components
    Summary
Chapter 7: Routing
    Technical requirements
    Understanding routing
    Understanding Vue Router
        Installing Vue Router
    Exploring the RouterView element
        Passing props to view
        Working with RouterView
    Setting up Vue Router
    Defining the routes
        Tips on loading components for route configuration
        Setting up the router instance
    Setting up a default layout for your app
        Exercise 7.01 – implementing a Message Feed page using Vue Router
    Setting up navigation links with RouterLink
        Tip for implementing the Back button
        Exercise 7.02 – adding the navigation link to the MessageFeed route
    Passing route parameters
    Understanding Router Hooks
        Setting up beforeEach Hooks
        Distinguishing between the beforeEach and beforeResolve Hooks
        The afterEach Hook
        Personalizing Hooks per route
        Setting up in-component Hooks
    Decoupling Params with Props
        Exercise 7.03: Passing the content of the selected message to a new message page and having it printed out
    Dynamic routing
    Catching error paths
        Exercise 7.04 – implementing a message route for each message with the dynamic routing pattern
    Nested routes
        Exercise 7.05 – building navigation tabs within the message view
    Using layouts
        Activity 7.01 – creating a message SPA with dynamic, nested routing, and layouts
    Summary
Chapter 8: Animations and Transitions
    Technical requirements
    Understanding Vue transitions
        Using the transition element
        Exploring transition classes
        An animation for a component
        Exploring custom transition classes
    Exploring JavaScript Hooks for transitions
    Transitioning groups of elements
        Creating a moving effect while transitioning a list
        Configuring an animation on initially rendering
        Exercise 8.02 – sorting a list of messages with an animation
    Examining transition routes
        Exercise 8.03 – creating a transition effect for each route navigated
    Using the GSAP library for animation
        Installing GSAP
        Basic tweens
        Exercise 8.04 – tweening with GSAP
        Modifying the look and feel with easing
        Modifying the look and feel with stagger
        Using Timeline
        Activity 8.01 – building a messages app with transitions and GSAP
    Summary
Part 3: Global State Management
Chapter 9: The State of Vue State Management
    Technical requirements
    Understanding the component architecture and the problem of the state
    Holding the state in a common ancestor component
        Exercise 9.01 – adding an occupation field to the profile card generator
        Exercise 9.02 – adding a Clear button to the profile card generator
    Adding simple state management
        Exercise 9.03 – moving the Clear button to the application header profile card generator and updating the Clear logic
        Activity 9.01 – adding Organization, Email, and Phone Number fields to a profile card generator
    Deciding when to use a local state or global state
    Summary
Chapter 10: State Management with Pinia
    Technical requirements
    What Pinia is
    Installing Pinia
    Using Pinia to create a store
        Exercise 10.01 – building a Color Preview app with a shared state
    Adding and using getters in your Pinia store
        Exercise 10.02 – improving the Color Preview app with getters
        Additional getter features
    Working with Pinia actions
        Exercise 10.03 – adding lightening and darkening features to the Color Preview app
    Debugging Pinia in Devtools
        Activity 10.01 – creating a simple shopping cart and price calculator
    Summary
Part 4: Testing and Application Deployment
Chapter 11: Unit Testing
    Technical requirements
    Understanding testing and the need to test code
        Different types of testing
    Building your first test
    Testing components
        Exercise 11.01: Building and unit testing a tag list component
    Testing component methods
        Exercise 11.02: Building and testing an ellipsis method
    Testing Vue routing
        Exercise 11.03: Building a tag page and testing its routing
    Testing state management with Pinia
        Exercise 11.04: Building and testing a cookie disclaimer banner
    Snapshot testing
        Activity 11.01: Adding a simple search-by-title page with tests
    Summary
Chapter 12: End-to-End Testing
    Technical requirements
    Understanding E2E testing and its use cases
    Configuring Cypress for a Vue.js application
    Using Cypress to interact with and inspect a Vue.js UI
        Exercise 12.01 – adding a New Comment button and a corresponding E2E test
    Triggering and waiting for UI updates with Cypress
        Exercise 12.02 – adding new comment editor input and a Submit functionality
        Exercise 12.03 – adding a submitting state to the new comment editor
    Intercepting HTTP requests
        Exercise 12.04 – POST comment to the API on submission
        Activity 12.01 – adding the ability to set a user’s email and test
    Summary
Chapter 13: Deploying Your Code to the Web
    Technical requirements
    Exploring the benefits of CI/CD as part of an agile software development process
    Building our apps for production
    Using GitLab CI/CD to test our code
        Exercise 13.01 – adding a lint step to our GitLab CI/CD pipeline
    Deploying to Netlify
        Exercise 13.02 – deploying a site to Netlify from GitHub
    Deploying to AWS using S3 and CloudFront
        Exercise 13.03 – deploying to S3 from GitLab CI/CD
        Activity 13.01 – adding CI/CD to a Book Search app with GitLab and deploying it to Netlify
    Summary
Index
    Why subscribe?
Other Books You May Enjoy
    Packt is searching for authors like you
    Share Your Thoughts
    Download a free PDF copy of this book