book

Front-End Development Projects with Vue.js

Name: Front-End Development Projects with Vue.js
ISBN: 9781838984823

by Raymond Camden, Hugo Di Francesco, Clifford Gurney, Philip Kirkbride, Maya Shavin, Dániel Szabó

November 2020

Beginner to intermediate

774 pages

11h 58m

English

Packt Publishing

Read now

Unlock full access

Front-End Development Projects with Vue.js
Preface
About the BookAbout the AuthorsWho This Book Is ForAbout the ChaptersConventionsBefore You BeginMinimum Hardware Recommendations for Running Node.js ApplicationsInstalling Node.jsInstalling GitInstalling YarnInstalling Vue.js CLI (the Vue Command-Line Interface)Installing Visual Studio Code (Editor/IDE)Installing the Code Bundle Get in TouchPlease Leave a Review
1. Starting Your First Vue Project
IntroductionAngular versus VueReact versus VueAdvantages of Using Vue for Your ProjectThe Vue Instance in a Simple Vue ApplicationA Webpack Vue ApplicationVue Single-Page ComponentsData Properties (Props)Exercise 1.01: Building Your First ComponentData Binding Syntax Using InterpolationExercise 1.02: Interpolation with ConditionalsStyling ComponentsExercise 1.03: Importing SCSS into a Scoped ComponentCSS ModulesExercise 1.04: Style Vue Components Using CSS ModulesExercise 1.05: Writing a Component Template in PUG (HAML)Vue DirectivesExercise 1.06: Basic Directives (v-text, v-once, v-html, v-bind, v-if, v-show)Two-Way Binding Using v-modelExercise 1.07: Two-Way Binding Using v-modelAnonymous LoopsExercise 1.08: Using v-for to Loop Over an Array of StringsIterating over ObjectsExercise 1.09: Using a v-for Loop over an Array of Objects and Using Their Properties for v-if ConditionsMethods in VueExercise 1.10: Triggering MethodsExercise 1.11: Returning Data Using Vue MethodsVue Lifecycle HooksExercise 1.12: Using Vue Lifecycles for Controlling DataActivity 1.01: Building a Dynamic Shopping List App Using Vue.jsSummary
2. Working with Data
IntroductionComputed PropertiesExercise 2.01: Implementing Computed Data into a Vue ComponentComputed SettersExercise 2.02: Using Computed SettersWatchersExercise 2.03: Using Watchers to Set New ValuesDeep Watching ConceptsExercise 2.04: Watching Nested Properties of a Data ObjectMethods versus Watchers versus Computed PropsExercise 2.05: Handling Search Functionality Using a Vue Method, a Watcher, and Computed PropsAsync Methods and Data FetchingExercise 2.06: Using Asynchronous Methods to Retrieve Data from an APIActivity 2.01: Creating a Blog List Using the Contentful APISummary
3. Vue CLI
IntroductionUsing Vue CLIExercise 3.01: Setting up a Project Using Vue CLIVue PrototypingGetting Started with PrototypingDefining Your Own Entry PointBuilding a Prototype for ProductionExercise 3.02: Instant Prototyping Using Vue CLIThe Vue-UIExercise 3.03: Creating and Building a New Project from the Vue-UIVue.js DevToolsExercise 3.04: Debugging a Vue Application Using DevToolsActivity 3.01: Building a Vue Application Using the Vue-UI and the Vuetify Component LibrarySummary
4. Nesting Components (Modularity)
IntroductionPassing PropsDefining a Simple Component That Takes PropsRendering a Component with Props Component Registration Tricks Exercise 4.01: Implementing a Greeting ComponentDynamic Props with Data Binding Exercise 4.02: Passing Props That Change Over Time Prop Typing and ValidationPrimitive Prop Validation Union and Custom Prop Types Custom Validation of Arrays, Object Shapes, and More with Validators Required PropsDefaulting Props Exercise 4.03: Validating an Object Property Slots, Named Slots, and Scoped SlotsPassing Markup to Be Rendered in a Child Component Using Named Slots to Delegate Rendering of Multiple SectionsUsing Scoped Slots to Wrap Prop Passing Logic Exercise 4.04: Implementing a Card Component Using Named Slots Template Logic Sharing with Filters Exercise 4.05: Implementing an Ellipsis Filter Vue.js refsExercise 4.06: Wrapping Countable.js with Vue.js Vue.js Events for Child-Parent CommunicationActivity 4.01: A Local Message View with Reusable ComponentsSummary
5. Global Component Composition
IntroductionMixins Exercise 5.01: Creating Your Own MixinPluginsExercise 5.02: Creating a Custom Axios Plugin Globally Registering ComponentsMaximizing Component FlexibilityUsing Vue.js Components without a .vue Single-File ComponentRuntime Definition with a String TemplateThe render FunctionJSXThe Vue component TagRendering Dynamic Components by Name or Component ReferenceCaching a Dynamic Component State with Keep-AliveExercise 5.03: Creating a Dynamic Card Layout with the component Tag Functional ComponentsActivity 5.01: Building a Vue.js Application with Plugins and Reusable Components Summary
6. Routing
IntroductionVue RouterSetting Up Vue RouterThe router-view ElementUsing Props to Define the Entry Point of an ApplicationSetting Up Vue Router for Vue to UseDefining the RoutesTips on Loading Components for Route ConfigurationSetting up the Router InstanceroutesmodebaseExercise 6.01: Implementing and Adding a Message Feed Page Using Vue Router Setting up Navigation LinksTip to Implement the Back ButtonExercise 6.02: Adding the Navigation Link to the MessageFeed Route Passing Route ParametersDecoupling Params with PropsExercise 6.03: Passing the Content of the Selected Message to a New Message Page and Having It Printed Out Router HooksSetting up beforeEach HooksDifferentiating Between the beforeEach and beforeResolve HooksThe afterEach HookPersonalizing Hooks per RouteSetting up in-Component HooksExercise 6.04: Extracting a Messages List to an External File and Loading It Only When MessageFeed Is in View Dynamic RoutingCatching Error PathsExercise 6.05: Implementing a Message Route for Each Message with a Dynamic Routing Pattern Nested RoutesExercise 6.06: Building Navigation Tabs within the Message View Using LayoutsActivity 6.01: Creating a Message SPA with Dynamic, Nested Routing, and Layouts Summary
7. Animations and Transitions
IntroductionVue TransitionsTransition ElementsTransition ClassesAnimation for a ComponentCustom Transition ClassesJavaScript HooksExercise 7.01: Adding a New Message with an Animation Effect Transition GroupsCreating a Moving Effect While Transitioning a ListMaking an Animation on Initial RenderExercise 7.02: Sorting a List of Messages with an Animation Transition RoutesExercise 7.03: Creating a Transition Effect for Each Route Navigated Using the GSAP Library for AnimationInstalling GSAPBasic tweensExercise 7.04: Tweens with GSAP Modifying the Look and Feel with EasingModifying the Look and Feel with StaggerUsing TimelineActivity 7.01: Building a Messages App with Transition and GSAP Summary
8. The State of Vue.js State Management
IntroductionHolding State in a Common Ancestor ComponentExercise 8.01: Adding an Occupation Field to the Profile Card GeneratorExercise 8.02: Adding a Clear Button to the Profile Card Generator The Event BusExercise 8.03: Moving the Clear Button to the Application Header Profile Card GeneratorUsing the Vuex Pattern in Contrast with Other Patterns Such as ReduxExercise 8.04: Adding an Organization Field to the Profile Generator Activity 8.01: Adding Email and Phone Number to a Profile Card GeneratorWhen to Use Local State and When to Save to Global StateSummary

9. Working with Vuex – State, Getters, Actions, and Mutations
IntroductionStoreStateGettersMutationsActionsModulesInstalling VuexWorking with StateExercise 9.01: Displaying State ValuesApplying GettersExercise 9.02: Adding Getters to a Vuex StoreGetters with ParametersExercise 9.03: Employing a Getter with ParametersModifying State with MutationsExercise 9.04: Working with MutationsUsing Actions for Asynchronous State ChangesExercise 9.05: Using Actions for Asynchronous LogicSimplifying with mapState and mapGettersExercise 9.06: Adding mapState and mapGettersSimplifying with mapMutations and mapActionsActivity 9.01: Creating a Simple Shopping Cart and Price CalculatorSummary
10. Working with Vuex – Fetching Remote Data
IntroductionInstallation of AxiosExercise 10.01: Using Axios to Load Data from an APIUsing Defaults with AxiosUsing Axios with VuexExercise 10.02: Working with Axios in VuexActivity 10.01: Using Axios and Vuex with AuthenticationSummary
11. Working with Vuex – Organizing Larger Stores
IntroductionApproach One – Using File SplittingExercise 11.01: Using File SplittingApproach Two – Using ModulesExercise 11.02: Making Use of ModulesOther Approaches to Organizing Your Vuex StoresVuex PathifyVuex Module Generator (VMG)Vuex ORMActivity 11.01: Simplifying a Vuex StoreSummary
12. Unit Testing
IntroductionWhy We Need to Test CodeUnderstanding Different Types of TestingYour First TestTesting ComponentsExercise 12.01: Building and Unit Testing a Tag List ComponentTesting Methods, Filters and MixinsExercise 12.02: Building and Testing an ellipsis FilterTesting Vue RoutingExercise 12.03: Building a Tag Page and Testing Its RoutingTesting VuexExercise 12.04: Building and Testing a Cookie Disclaimer Banner (Vuex)Snapshot TestingActivity 12.01: Adding a Simple Search by Title Page with TestsSummary
13. End-to-End Testing
IntroductionUnderstanding E2E Testing and Its Use CasesConfiguring Cypress for a Vue.js ApplicationUsing Cypress to Interact with and Inspect a Vue.js UIExercise 13.01: Adding a "New Comment" Button and Corresponding E2E TestTriggering and Waiting for UI Updates with CypressExercise 13.02: Adding New Comment Editor Input and Submit FunctionalityExercise 13.03: Adding a Submitting State to the New Comment EditorIntercepting HTTP RequestsExercise 13.04: POST Comment to API on SubmissionVisual Regression Testing with Cypress SnapshotsActivity 13.01: Adding the Ability to Set a User's Email and TestsSummary
14. Deploying Your Code to the Web
IntroductionThe Benefits of CI/CD as Part of an Agile Software Development ProcessBuilding for ProductionUsing GitLab CI/CD to Test Your CodeExercise 14.01: Adding a Lint Step to Your GitLab CI/CD PipelineDeploying to NetlifyExercise 14.02: Deploying a Site to Netlify from GitHubDeploying to AWS Using S3 and CloudFrontExercise 14.03: Deploying to S3 from GitLab CI/CDActivity 14.01: Adding CI/CD with GitLab to a Book Search App and Deploying to Amazon S3 and CloudFrontSummary
Appendix
1. Starting Your First Vue ProjectActivity 1.01: Building a Dynamic Shopping List App Using Vue.js2. Working with DataActivity 2.01: Creating a Blog List Using the Contentful API3. Vue CLIActivity 3.01: Building a Vue Application Using the Vue-UI and the Vuetify Component Library4. Nesting Components (Modularity)Activity 4.01: A Local Message View with Reusable Components5. Global Component CompositionActivity 5.01: Building a Vue.js Application with Plugins and Reusable Components6. RoutingActivity 6.01: Creating a Message SPA with Dynamic, Nested Routing, and Layouts 7. Animations and TransitionsActivity 7.01: Building a Messages App with Transition and GSAP 8. The State of Vue.js State ManagementActivity 8.01: Adding Email and Phone Number to a Profile Card Generator9. Working with Vuex – State, Getters, Actions, and MutationsActivity 9.01: Creating a Simple Shopping Cart and Price Calculator10. Working with Vuex – Fetching Remote DataActivity 10.01: Using Axios and Vuex with Authentication11. Working with Vuex – Organizing Larger StoresActivity 11.01: Simplifying a Vuex Store12. Unit TestingActivity 12.01: Adding a Simple Search by Title Page with Tests13. End-to-End TestingActivity 13.01: Adding the Ability to Set a User's Email and Tests14. Deploying Your Code to the WebActivity 14.01: Adding CI/CD with GitLab to a Book Search App and Deploying to Amazon S3 and CloudFront

Overview

Front-End Development Projects with Vue.js is your guide to mastering Vue 2 for modern web development. In this book, you will learn how to apply Vue's capabilities through engaging projects, while gaining insights into state management, testing, and deployment. You'll confidently tackle real-world scenarios with the skills and techniques demonstrated.

What this Book will help me do

Build and set up your first Vue 2 project with an ideal development environment.
Master the creation and use of Vue components for modular application development.
Learn to manage application state efficiently using Vuex for advanced state handling.
Integrate and utilize external libraries to add rich animations and enhance user experiences.
Prepare your applications for production by testing and deploying them effectively.

Author(s)

Raymond Camden, Hugo Di Francesco, Clifford Gurney, Philip Kirkbride, and Maya Shavin are seasoned developers and educators in the field of front-end development. Each author brings a wealth of experience, combining years of practical expertise with a focus on approachable and hands-on teaching methods. Their collaborative effort ensures a comprehensive and engaging learning journey into Vue.js.

Who is it for?

This book is ideal for beginner developers who are new to Vue.js. If you have a foundation in HTML, CSS, JavaScript, and Node package management, you're ready to dive in. Whether you're transitioning from another framework like React or Angular, or starting fresh in the world of front-end development, this book will guide you. Developers looking to expand their skill set to include modern Vue techniques and principles will find it immensely helpful.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Building Progressive Web Applications with Vue.js: Reliable, Fast, and Engaging Apps with Vue.js

Publisher Resources

ISBN: 9781838984823

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills