Vue.js 3 for Beginners

Table of contents

1. Vue.js 3 for Beginners
2. Foreword
3. Contributors
4. About the author
5. About the reviewers
6. 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. Get in touch
   7. Share Your Thoughts
   8. Download a free PDF copy of this book
7. Part 1: Getting Started with Vue.js
8. Chapter 1: Exploring the Book’s Layout and Companion App
   1. Technical requirements
   2. The companion app
      1. The Companion App features
      2. The application code
   3. The core areas of a web application
   4. Component-based architecture
      1. One page at a time
      2. From one page to many components
      3. Atomic design
      4. Separation of concern
   5. Summary
9. Chapter 2: The Foundation of Vue.js
   1. Vue.js reactivity fundamentals
   2. Understanding the Vue.js lifecycle and hooks
   3. Vue.js component structure
      1. Single-file components
      2. Options API versus Composition API – Two sides of the same coin
      3. Sample components
   4. Summary
10. Part 2: Understanding the Core Features of Vue.js
11. Chapter 3: Making Our HTML Dynamic
    1. Technical requirements
    2. Building your first Vue.js project
    3. Creating our first component
    4. Introducing properties
    5. Learning Vue.js reactive data with Refs and Reactive
    6. Summary
12. Chapter 4: Utilizing Vue’s Built-In Directives for Effortless Development
    1. Technical requirements
    2. Displaying text with v-text and v-html
       1. Applying dynamic text to our component using v-text
       2. Modifying the inner HTML of an element with v-html
    3. Handling element visibility with v-if and v-show
       1. Hiding elements from the DOM with v-show
       2. Keeping the DOM clean and performant with v-if
    4. Simplifying your template with v-for
    5. Summary
13. Chapter 5: Leveraging Computed Properties and Methods in Vue.js
    1. Technical requirements
    2. Abstracting functionality using methods
    3. Creating dynamic data using computed properties
    4. Learning the difference between methods and computed properties
       1. Technical differences
       2. How to spot them in your component
    5. Summary
14. Chapter 6: Event and Data Handling in Vue.js
    1. Technical requirements
    2. Exploring the Companion App changes
       1. Folders and file changes
       2. Logic changes
    3. Deepening our knowledge of props
       1. Props configurations
       2. Creating a basic button
    4. Handling native events in Vue.js
       1. Event modifiers
    5. Connecting components with custom events
       1. Event arguments
    6. Summary
15. Chapter 7: Handling API Data and Managing Async Components with Vue.js
    1. Technical requirements
    2. Loading data from an API using the Vue.js life cycle
       1. Loading social posts from an API
       2. Fixing the SocialPost.vue properties’ misalignment
       3. Load comments on demand
    3. Watching for changes in components using watch
    4. Handling asynchronous components with <Suspense>
       1. Understanding asynchronous components
       2. Turning a component into an asynchronous component
       3. Rendering async components
    5. Summary
16. Part 3: Expanding Your Knowledge with Vue.js and Its Core Libraries
17. Chapter 8: Testing Your App with Vitest and Cypress
    1. Technical requirements
    2. The testing pyramids
       1. Increased flexibility and the reduced risk of change
    3. Unit testing with Vitest
       1. Installing Vitest in your application
       2. Writing our first unit test
    4. E2E tests with Cypress
       1. Installing Cypress into your project
       2. Learning the E2E tests’ file format and file location
       3. Writing your first E2E test
    5. Introducing advanced testing techniques
       1. Mocking
       2. Spying
       3. shallowMount (unit tests only)
    6. Summary
18. Chapter 9: Introduction to Advanced Vue.js Techniques – Slots, Lifecycle, and Template Refs
    1. Technical requirements
    2. The power of slots
       1. Adding default values to a slot
       2. Slot versus property
       3. Provide multiple slots with named slots
    3. Accessing components elements with Template Refs
       1. Focus an onMounted element
       2. Access from native validation
    4. Deep diving into the lifecycle of a real app
       1. Adding conditional rendering to the sidebar
       2. Writing the logic to handle the sidebar states
       3. Save and read the user preference in localStorage
    5. Summary
19. Chapter 10: Handling Routing with Vue Router
    1. Technical requirements
    2. Introducing vue-router
       1. Learning about vue-router configuration
       2. Creating our first view
    3. Navigating between routes
       1. Using the <router-link> component
       2. Programmatic navigation
    4. Dynamic route matching
       1. Creating a user profile page
       2. Creating a user profile route
       3. Adding navigation using the route name
       4. Reading route parameters in a route component
    5. Learning about nested routes
       1. Applying nested routes to the user
    6. Reusing routes with alias and redirect
    7. Summary
20. Chapter 11: Managing Your Application’s State with Pinia
    1. Technical requirements
    2. When to use state management
    3. Learning about the structure of a Pinia store
    4. Centralized sidebar state management with Pinia
       1. Creating our first store
       2. Creating a post store with Pinia
       3. Implementing an Add Post action
    5. Summary
21. Chapter 12: Achieving Client-Side Validation with VeeValidate
    1. Technical requirements
    2. Understanding forms
       1. Wrapping your form within the <form> element
       2. Do not forget labels
       3. There is more than just type=”text”
       4. Setting your form to be autocompleted
    3. Two-way binding with v-model
    4. Controlling your form using VeeValidate
    5. Defining your form validation with VeeValidate
       1. Using VeeValidate rules
    6. Summary
22. Part 4: Conclusion and Further Resources
23. Chapter 13: Unveiling Application Issues with the Vue Devtools
    1. Getting familiar with the Vue Devtools
       1. Debugging components in your Vue Devtools
       2. Use cases for the Vue Devtools information panel
    2. Deep dive into the Vue Devtools Timeline tab
    3. Analyzing additional data with Vue Devtools plugins
       1. The Pinia Vue Devtools plugin
       2. The vue-router Vue Devtools plugin
    4. Summary
24. Chapter 14: Advanced Resources for Future Reading
    1. Available tools and resources
       1. Vue.js documentation
       2. Newsletter
       3. Community members
       4. Request For Comments – RFC
    2. What is left for Vue.js?
       1. Miscellaneous
       2. Core features
       3. Pinia’s features
       4. Vue-router features
    3. Contribute back to the community
    4. Let’s look back at what we’ve achieved
       1. All about Vue.js
       2. From the basics and beyond
       3. From component to components
       4. Vue.js ecosystem
       5. Just the tip of the iceberg
    5. Summary
25. Index
    1. Why subscribe?
26. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share Your Thoughts
    3. Download a free PDF copy of this book