book

Front-End Development Projects with Vue.js

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

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
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
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
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
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
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
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
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
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

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
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
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
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
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
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
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

Content preview from Front-End Development Projects with Vue.js

6. Routing

Overview

In this chapter, we will understand how routing and Vue Router work. We will also set up, implement, and manage the routing system in our app with Vue Router. Then we will look at dynamic routing for passing parameter values and nested routes for better reusability in complex applications. In addition, we will look at JavaScript Hooks, which can be used for features such as authentication and error handling. By the end of this chapter, you will be ready to handle static and dynamic routing in any Vue application.

Introduction

Routing is one of the most essential and primary parts of building dynamic web applications. You may be familiar with the word in its everyday context. For example, when we use Google Maps, we ...

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.

Start your free trial

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

Publisher Resources

ISBN: 9781838984823Supplemental Content

Front-End Development Projects with Vue.js

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

6. Routing

Introduction

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.

You might also like

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

Test-Driven JavaScript Development

Building Vue.js Applications with GraphQL

Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch

Publisher Resources

6. Routing

Introduction

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.

You might also like

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

Test-Driven JavaScript Development

Building Vue.js Applications with GraphQL

Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch

Publisher Resources

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.