book

Vue.js 3 for Beginners

by Simone Cuomo

September 2024

Beginner

302 pages

7h 30m

English

Packt Publishing

Read now

Unlock full access

About the author
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesConventions usedGet in touchShare Your ThoughtsDownload a free PDF copy of this book
Technical requirementsThe companion appThe Companion App featuresThe application codeThe core areas of a web applicationComponent-based architectureOne page at a timeFrom one page to many componentsAtomic designSeparation of concernSummary
Vue.js reactivity fundamentalsUnderstanding the Vue.js lifecycle and hooksVue.js component structureSingle-file componentsOptions API versus Composition API – Two sides of the same coinSample componentsSummary
Technical requirementsBuilding your first Vue.js projectCreating our first componentIntroducing propertiesLearning Vue.js reactive data with Refs and ReactiveSummary

Technical requirementsDisplaying text with v-text and v-htmlApplying dynamic text to our component using v-textModifying the inner HTML of an element with v-htmlHandling element visibility with v-if and v-showHiding elements from the DOM with v-showKeeping the DOM clean and performant with v-ifSimplifying your template with v-forSummary
Technical requirementsAbstracting functionality using methodsCreating dynamic data using computed propertiesLearning the difference between methods and computed propertiesTechnical differencesHow to spot them in your componentSummary
Technical requirementsExploring the Companion App changesFolders and file changesLogic changesDeepening our knowledge of propsProps configurationsCreating a basic buttonHandling native events in Vue.jsEvent modifiersConnecting components with custom eventsEvent argumentsSummary
Technical requirementsLoading data from an API using the Vue.js life cycleLoading social posts from an APIFixing the SocialPost.vue properties’ misalignmentLoad comments on demandWatching for changes in components using watchHandling asynchronous components with <Suspense>Understanding asynchronous componentsTurning a component into an asynchronous componentRendering async componentsSummary
Technical requirementsThe testing pyramidsIncreased flexibility and the reduced risk of changeUnit testing with VitestInstalling Vitest in your applicationWriting our first unit testE2E tests with CypressInstalling Cypress into your projectLearning the E2E tests’ file format and file locationWriting your first E2E testIntroducing advanced testing techniquesMockingSpyingshallowMount (unit tests only)Summary
Technical requirementsThe power of slotsAdding default values to a slotSlot versus propertyProvide multiple slots with named slotsAccessing components elements with Template RefsFocus an onMounted elementAccess from native validationDeep diving into the lifecycle of a real appAdding conditional rendering to the sidebarWriting the logic to handle the sidebar statesSave and read the user preference in localStorageSummary
Technical requirementsIntroducing vue-routerLearning about vue-router configurationCreating our first viewNavigating between routesUsing the <router-link> componentProgrammatic navigationDynamic route matchingCreating a user profile pageCreating a user profile routeAdding navigation using the route nameReading route parameters in a route componentLearning about nested routesApplying nested routes to the userReusing routes with alias and redirectSummary
Technical requirementsWhen to use state managementLearning about the structure of a Pinia storeCentralized sidebar state management with PiniaCreating our first storeCreating a post store with PiniaImplementing an Add Post actionSummary
Technical requirementsUnderstanding formsWrapping your form within the <form> elementDo not forget labelsThere is more than just type=”text”Setting your form to be autocompletedTwo-way binding with v-modelControlling your form using VeeValidateDefining your form validation with VeeValidateUsing VeeValidate rulesSummary
Getting familiar with the Vue DevtoolsDebugging components in your Vue DevtoolsUse cases for the Vue Devtools information panelDeep dive into the Vue Devtools Timeline tabAnalyzing additional data with Vue Devtools pluginsThe Pinia Vue Devtools pluginThe vue-router Vue Devtools pluginSummary
Available tools and resourcesVue.js documentationNewsletterCommunity membersRequest For Comments – RFCWhat is left for Vue.js?MiscellaneousCore featuresPinia’s featuresVue-router featuresContribute back to the communityLet’s look back at what we’ve achievedAll about Vue.jsFrom the basics and beyondFrom component to componentsVue.js ecosystemJust the tip of the icebergSummary
Other Books You May EnjoyPackt is searching for authors like youShare Your ThoughtsDownload a free PDF copy of this book

Overview

Unlock the power of Vue.js 3 and master the art of building modern web applications. In this book, you'll learn the essentials of Vue.js, including its ecosystem and core libraries, to create scalable and performant applications.

What this Book will help me do

Master the foundational concepts of Vue.js, such as components, directives, and data binding.
Understand and apply Vue's ecosystem tools like Vue Router, Pinia, and testing frameworks.
Build a complete social media application from scratch, following a structured and easy-to-understand approach.
Get hands-on experience with the Composition API and script setup for Vue development.
Learn advanced topics including debugging with Vue Devtools and implementing best practices.

Author(s)

Simone Cuomo is an experienced software architect and developer with over 12 years of career spanning advanced web application development and mentoring. His approach to teaching is driven by practicality, clarity, and the focus on building real-world applications.

Who is it for?

This book is intended for beginner web developers or individuals with basic knowledge of HTML, CSS, and JavaScript who wish to start their journey with Vue.js. It's suitable for students, hobbyists, and professionals aiming to enter or strengthen their front-end development skills.