Vue.js 3 for Beginners : Learn the Essentials of Vue.js 3 and Its Ecosystem to Build Modern Web Applications

Learn the essentials of Vue.js 3 and its ecosystem to build modern web applications. 6 customer reviews. Instant delivery. Top rated Web Development products. Key Features • Discover best practices for building scalable and performant Vue.js applications • Learn the basics of component-based architecture • Familiarize yourself with Vue.js core libraries and ecosystem • Purchase of the print or Kindle book includes a free PDF eBook Book Description Discover why Vue.js is a must-learn JavaScript framework for aspiring developers. If you’re a beginner fascinated by Vue.js and its potential, then this book will show you how the progressive and versatile framework can help you build performant applications. Written by an accomplished software architect with over 12 years of experience, Vue.js 3 for Beginners provides a solid foundation in Vue.js and guides you at every step to create a robust social media application, component by component. Starting with a clean canvas using plain HTML and CSS, you’ll learn new topics to build your application incrementally. Beyond the core features, you’ll explore crucial parts of the Vue.js ecosystem, such as state management with Pinia, routing with Vue Router, and testing with Vitest, and Cypress. The structured GitHub repository ensures a smooth transition from one chapter to the next, offering valuable insights into advanced topics, techniques, and resources. This book is designed to serve as a practical reference guide, allowing you to quickly revisit specific topics when needed. By the end of the book, you’ll have built a strong understanding of Vue.js and be ready to build simple applications effortlessly. Who is this book for? Vue.js for Beginners is for aspiring web developers, students, hobbyists, or anyone who wants to learn Vue.js from scratch and is eager to foray into front-end development using this modern and popular framework. Basic knowledge of HTML, CSS, and JavaScript is required to fully grasp the content of this Vue.js book. What you will learn • Gain practical knowledge of the Vue.js framework • Deepen your understanding of Pinia, Vue Router, validation libraries, and their integration with Vue.js applications • Explore the core concepts of Vue.js, including components, directives, and data binding • Create scalable, maintainable applications from scratch • Build applications using the script setup and the Composition API • Debug your applications with the Vue debugger tool Title Page Copyright and Credits Dedication Foreword Contributors Table of Contents Preface Part 1: Getting Started with Vue.js Chapter 1: Exploring the Book’s Layout and Companion App Technical requirements The companion app The Companion App features The application code The core areas of a web application Component-based architecture One page at a time From one page to many components Atomic design Separation of concern Summary Chapter 2: The Foundation of Vue.js Vue.js reactivity fundamentals Understanding the Vue.js lifecycle and hooks Vue.js component structure Single-file components Options API versus Composition API – Two sides of the same coin Sample components Summary Part 2: Understanding the Core Features of Vue.js Chapter 3: Making Our HTML Dynamic Technical requirements Building your first Vue.js project Creating our first component Introducing properties Learning Vue.js reactive data with Refs and Reactive Summary Chapter 4: Utilizing Vue’s Built-In Directives for Effortless Development Technical requirements Displaying text with v-text and v-html Applying dynamic text to our component using v-text Modifying the inner HTML of an element with v-html Handling element visibility with v-if and v-show Hiding elements from the DOM with v-show Keeping the DOM clean and performant with v-if Simplifying your template with v-for Summary Chapter 5: Leveraging Computed Properties and Methods in Vue.js Technical requirements Abstracting functionality using methods Creating dynamic data using computed properties Learning the difference between methods and computed properties Technical differences How to spot them in your component Summary Chapter 6: Event and Data Handling in Vue.js Technical requirements Exploring the Companion App changes Folders and file changes Logic changes Deepening our knowledge of props Props configurations Creating a basic button Handling native events in Vue.js Event modifiers Connecting components with custom events Event arguments Summary Chapter 7: Handling API Data and Managing Async Components with Vue.js Technical requirements Loading data from an API using the Vue.js life cycle Loading social posts from an API Fixing the SocialPost.vue properties’ misalignment Load comments on demand Watching for changes in components using watch Handling asynchronous components with Understanding asynchronous components Turning a component into an asynchronous component Rendering async components Summary Part 3: Expanding Your Knowledge with Vue.js and Its Core Libraries Chapter 8: Testing Your App with Vitest and Cypress Technical requirements The testing pyramids Increased flexibility and the reduced risk of change Unit testing with Vitest Installing Vitest in your application Writing our first unit test E2E tests with Cypress Installing Cypress into your project Learning the E2E tests’ file format and file location Writing your first E2E test Introducing advanced testing techniques Mocking Spying shallowMount (unit tests only) Summary Chapter 9: Introduction to Advanced Vue.js Techniques – Slots, Lifecycle, and Template Refs Technical requirements The power of slots Adding default values to a slot Slot versus property Provide multiple slots with named slots Accessing components elements with Template Refs Focus an onMounted element Access from native validation Deep diving into the lifecycle of a real app Adding conditional rendering to the sidebar Writing the logic to handle the sidebar states Save and read the user preference in localStorage Summary Chapter 10: Handling Routing with Vue Router Technical requirements Introducing vue-router Learning about vue-router configuration Creating our first view Navigating between routes Using the component Programmatic navigation Dynamic route matching Creating a user profile page Creating a user profile route Adding navigation using the route name Reading route parameters in a route component Learning about nested routes Applying nested routes to the user Reusing routes with alias and redirect Summary Chapter 11: Managing Your Application’s State with Pinia Technical requirements When to use state management Learning about the structure of a Pinia store Centralized sidebar state management with Pinia Creating our first store Creating a post store with Pinia Implementing an Add Post action Summary Chapter 12: Achieving Client-Side Validation with VeeValidate Technical requirements Understanding forms Wrapping your form within the element Do not forget labels There is more than just type=”text” Setting your form to be autocompleted Two-way binding with v-model Controlling your form using VeeValidate Defining your form validation with VeeValidate Using VeeValidate rules Summary Part 4: Conclusion and Further Resources Chapter 13: Unveiling Application Issues with the Vue Devtools Getting familiar with the Vue Devtools Debugging components in your Vue Devtools Use cases for the Vue Devtools information panel Deep dive into the Vue Devtools Timeline tab Analyzing additional data with Vue Devtools plugins The Pinia Vue Devtools plugin The vue-router Vue Devtools plugin Summary Chapter 14: Advanced Resources for Future Reading Available tools and resources Vue.js documentation Newsletter Community members Request For Comments – RFC What is left for Vue.js? Miscellaneous Core features Pinia’s features Vue-router features Contribute back to the community Let’s look back at what we’ve achieved All about Vue.js From the basics and beyond From component to components Vue.js ecosystem Just the tip of the iceberg Summary Index About Packt Other Books You May Enjoy Gain proficiency in Vue.js 3 and its core libraries, including Pinia, Vue Router, and Vitest, by developing a social media web application with detailed, hands-on instructionsKey FeaturesDiscover best practices for building scalable and performant Vue.js applicationsLearn the basics of component-based architectureFamiliarize yourself with Vue.js core libraries and ecosystemPurchase of the print or Kindle book includes a free PDF eBookBook DescriptionDiscover why Vue.js is a must-learn JavaScript framework for aspiring developers. If you're a beginner fascinated by Vue.js and its potential, then this book will show you how the progressive and versatile framework can help you build performant applications. Written by an accomplished software architect with over 12 years of experience, Vue.js 3 for Beginners provides a solid foundation in Vue.js and guides you at every step to create a robust social media application, component by component. Starting with a clean canvas using plain HTML and CSS, you'll learn new topics to build your application incrementally. Beyond the core features, you'll explore crucial parts of the Vue.js ecosystem, such as state management with Pinia, routing with Vue Router, and testing with Vitest, and Cypress. The structured GitHub repository ensures a smooth transition from one chapter to the next, offering valuable insights into advanced topics, techniques, and resources. This book is designed to serve as a practical reference guide, allowing you to quickly revisit specific topics when needed. By the end of the book, you'll have built a strong understanding of Vue.js and be ready to build simple applications effortlessly.What you will learnGain practical knowledge of the Vue.js frameworkDeepen your understanding of Pinia, Vue Router, validation libraries, and their integration with Vue.js applicationsExplore the core concepts of Vue.js, including components, directives, and data bindingCreate scalable, maintainable applications from scratchBuild applications using the script setup and the Composition APIDebug your applications with the Vue debugger toolWho this book is forVue.js for Beginners is for aspiring web developers, students, hobbyists, or anyone who wants to learn Vue.js from scratch and is eager to foray into front-end development using this modern and popular framework. Basic knowledge of HTML, CSS, and JavaScript is required to fully grasp the content of this Vue.js book.