Mastering Vue.js: A Beginner’s Guide

http://jannaorganic.co.uk/blog/2025/04/03/vsb9xiylji Cover Page Half-Title Page Series Page Title Page Copyright Page Contents Preface About the Author Chapter 1 Introduction to Vue.js What is Vue.js? Advantages and Disadvantages Advantages Easy to Learn Progressiveness Community and Support Best of Both Worlds Model-View-ViewModel (MVVM) Architecture Lightweight No Brainer Be a Tool Sense of Community DOM-inant Two Faced Divide and Conquer Tools and Libraries Low Storage Requirements Simplicity Documentation Reactivity Components and Reusability Component-Based Architecture (CBA) Flexibility Tiny Size Virtual DOM Rendering and Performance Reactive Two-Way Data Binding Single-File Components and Readability Integration Capabilities and Flexibility Solid Tooling Ecosystem Easy to Learn Concise Documentation Community Support Disadvantages Language Barrier Reactivity Complexity Lack of Support for Large-Scale Projects Risk of over Flexibility Limited Resources Lack of Experienced Developers Lack of Scalability Lack of Plugins Small Community Poverty Pack Spoilt for Options Lack of Financial Support for Large-Scale Projects Benefits Over other JS Frameworks Small Easy to Understand Simple Integration Flexibility Two-Way Communication Great Tooling Best of Both Worlds Conclusion Chapter 2 Basics of Vue.js JSX Prerequisites Configure Vue to Use JSX Using JSX in Render Importing Vue JSX Components How to Make JSX Work with Typescript Setup Props Context Accessing Component Properties Usage with Templates Usage with Render Functions Usage of This First Component Components in View Single-File Component Props Prop Casing (camelCase vs. kebab-case) Prop Types Passing Static or Dynamic Props Passing a Number Passing a Boolean Passing an Array Passing an Object Passing the Properties of an Object One-Way Data Flow Prop Validation Type Checks Non-Prop Attributes Using Existing Attributes to Replace/Merge Disabling Attribute Inheritance State Single-State Tree Getting Vuex State into the Vue Components The mapState Helper Object Spread Operator Components Can Still Have Local State Methods Conclusion Chapter 3 Vue Components Conditional Vue.js Conditional Rendering What Is the Difference between v-if and v-show? When Should You Utilize Each of Them? v-if Conditional Groups with the v-if on <template> v-else Controlling Reusable Elements with the Key v-show v-if vs. v-show v-if with v-for v-else-if Wrapping Up Styling CSS Styling of Vue Components Styling with External CSS Files Adding Global Styles to Single File Components In Vue, Add CSS Classes Adding Scoped Styles Prerequisites Set Up Your Vue Project To Style in Vue, Use the Scoped Property Link with an External CSS File In Vue.js, Use Global Styles Use Inline Styling Object Syntax Array Syntax Styled Components Benefits of Styled Components in Vue.js Build Your Components No Classes Policy Concurrent Design A Huge Community Installing Styled Components in Vue.js Passing the Props in Styled Components Dynamic Styling with Props in Vue.js Applying the Same Style to Multiple Components Altering the Displayed Component Dynamically Extending Styles Conclusion Chapter 4 Working with Images Importing Images Conclusion Chapter 5 Routing in Vue Routing Getting Started Router’s Config Router-Link Router-View Using the Parameters Inside the Routers home.vue details.vue detail.vue Component The Transition App.vue Using CSS3 Animation Direct Download from CDN Props for Router Link append active-class exact-active-class Simple Routing from Scratch Router and Query Parameters Get Query Parameters from a URL main.js App.vue views/Helloeveryone.vue main.js URLSearchParams main.js App.vue components/Helloeveryone.vue Conclusion Chapter 6 Programmatic Navigation Programmatic Navigation Programmatic Routes router.push(location, onComplete?, onAbort?) router.replace(location, onComplete?, onAbort?) router.go(n) router.push() router.push() example router.replace(location, onComplete?, onAbort?) router.go(n) Lazy Loading What Is Lazy Loading in Vue.js? Why Is Lazy Loading Significant? Vue.js Lazy Loading Example Starting a Vue.js Project I Was Manually Adding a New Route How to Lazily Load Vue.js Components Removing Import Statements lazyLoad Function webpack Import Statement Which Scripts Can You Load Lazily? How to Add Lazy Loading Dynamic Imports Lazy Loading Vue Components Grouping Components in the Same Chunk Conclusion Chapter 7 Advanced API Concepts Context API Will Context API Replace Redux? Important Note How Do I Utilize the Context API? Learn How the React Context API Works and when to Utilize It to Avoid Prop-Drilling in Your Application Why Context API? Context API createContext Provider Consumer useContext React’s Context API and Provide/Inject in Vue Plugin/core/util/store-template.js Plugin/core/index.vue Plugin/components/nested-component.vue Using React’s Context API Provide/Inject in Vue Use with Caution Complete Visibility into Production React Apps So How Do We Access Component Properties? context.attrs context.slots context.emit Conclusion Chapter 8 Vue Testing Library Nock How Does It Work? Why Perform Mock HTTP Requests during Testing? What Is Nock? Adding Nock Using ‘nock’ Using ‘nock.back’ Mocking Actions Mocking Getters Mocking with Modules Testing a Vuex Store Testing Getters, Mutations, and Actions Separately Testing a Running Store Vue.js-Testing-Library Unit Testing Introduction Choosing Your Framework Excellent Mistake Reporting Installation What Is Vue Testing Library? Why Use Vue Testing Library? How Vue Testing Library Works? Getting Started with Vue Testing Library? Quickstart The Problem The Solution Conclusion Chapter 9 Forms and Validation Form Basics Referencing Forms Submitting a Form Accessing Form Fields Put It All Together: Signup Form How It Works The showMessage() Function The hasValue() Function The validateEmail() Function The Submit Event Handler Summary Javascript form Validation JavaScript Has the Ability to Validate Numerical Input Automatic HTML Form Validation Data Validation HTML Constraint Validation Constraint-Validation HTML Input Attributes Constraint-Validation CSS Pseudo Selectors Basic Usage Dynamic Options Rendered with v-for Value Bindings Modifiers .lazy .number .trim v-model with Components The Basics Lazy Updates Casting Value as a Number Bind to Expressions Dynamic Select Options Option Groups Options Filter Static Default Option Input Debounce Setting Up Our Vue.js App Binding Input Values with v-model Conclusion Bibliography Index