Vue.js for Jobseekers A complete guide to learning Vue.js, building projects, and getting hired (Clive Harber) (z-library.sk, 1lib.sk, z-lib.sk)

📄 File Format: PDF

💾 File Size: 2.3 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

(This page has no text content)

📄 Page 3

Vue.js for Jobseekers A complete guide to learning Vue.js, building projects, and getting hired Clive Harber www.bpbonline.com

📄 Page 4

Copyright © 2024 BPB Online All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor BPB Online or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book. BPB Online has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, BPB Online cannot guarantee the accuracy of this information. First published: 2024 Published by BPB Online WeWork 119 Marylebone Road London NW1 5PU

📄 Page 5

UK | UAE | INDIA | SINGAPORE ISBN 978-93-55518-750 www.bpbonline.com

📄 Page 6

Dedicated to For Cathy Love of my Life, Wife, Best Friend, Inspiration and Anchor, Without whom this would not have been possible

📄 Page 7

About the Author Clive Harber has been programming computers since he was 13. He holds a Master's degree in Chemical Engineering from the University of Wales, Swansea and diplomas in Marine Biology and Art History. Having written code in a number of programming languages and different paradigms over the years for the sports and betting industries, telecommunications, health care, retail and entertainment sectors, he is now at a point where he feels he can be useful to the programming community as a whole. Clive has previously co-written two other books – Getting MEAN with MongoDB, Express, Angular and Node 2nd ed and Implementing Cloud Design Patterns for AWS 2nd ed, and has been a reviewer and technical reviewer on more than 10 other widely available books on a variety of technical subjects (Frontend frameworks – Vue.js/React/Web Components, testing, Elixir, UI/UX, Microservices, desktop applications). He has been using Vue.js for several years on multiple projects. Currently, Clive runs his own consultancy providing expertise in building web and mobile applications using Node, Vue.js, Quasar, NativeScript, Elm, Elixir and PhoenixFramework.

📄 Page 8

About the Reviewer Ivan Almaši is a full-time Frontend Developer. He has been working as a contractor/freelancer for the past 6 years and the last 5 years almost exclusively in the Vue.js ecosystem during which he worked on different projects, most notably a SaaS enterprise solution for quality assurance. His experience also includes converting designs to pixel-perfect UIs utilizing Tailwind CSS.

📄 Page 9

Acknowledgements I want to express my deepest gratitude to my family and friends for their unwavering support and encouragement throughout this book's writing, especially my wife Cathy and my children, Jacob and Rebecca. I am also grateful to BPB Publications for their guidance and expertise in bringing this book to fruition. It was a long journey of building this book, with valuable participation and collaboration of reviewers, technical experts, and editors. I would also like to acknowledge the valuable contributions of my colleagues and co-workers during many years working in the tech industry, who have taught me so much and provided valuable feedback on my work. Thank you to all the readers who have taken the time to read this book. I hope that this will help you in your future endeavours. Lastly, burn out, depression, anxiety and imposter syndrome are real things that we can all suffer from. If you are effected by any of these, speak up and ask for help, the world is a better place for you in it.

📄 Page 10

Preface Knowing where to start with any element of building software is usually half the battle. There are a plethora of options, myriad of opinions and multiple ways of doing things, so finding the best way can prove to be very daunting. This book is a good place to begin getting acquainted with frontend development using Vue.js. This book is designed to give insight into not only the framework, but also how the industry works, some questions you might face at interview, plus some handy pointers of the wider Vue.js ecosystem that you might need to understand, or use as a springboard for your own projects. This is not a total beginners manual, you will need to know the basics of HTML, CSS and some JavaScript already. You might have completed some self- or college study, already have a year or two of industry experience or transitioning from a different framework. You will be covering some of the more advanced topics that you might not have come across before, that you will need in order to create maintainable code and advance your career. We will be bringing you Vue.js from the ground up, so do not have to worry about that. Once we have the basics of Vue.js under our collective belts, we will forge ahead through standard uses such as front-side routing and state management before you finally cover some advanced, more modern, topics, such as server-side rendering and building for mobile which are not ordinarily covered in books like this.

📄 Page 11

With this book, you will gain knowledge and experience of the Vue.js framework and its ecosystem, learn how to use the framework to solve problems and build easy to maintain user interfaces that can be used across many different display devices. We hope that you find this book interesting, helpful and informative, regardless of which stage your career is at. Chapter 1: Introducing Front-End Development with Vue.js – this is the start of your journey. This chapter covers web development as a paradigm, where it came from, and where it is going. You will then get a 10,000 ft view of the framework, where it fits in and how it can improve your working life. Chapter 2: Working in Vue.js Roles – this chapter gives you an overview of the job roles that might be on offer and the kinds of work that you can expect to do and how you might progress in your career. We will also cover different types of company and how developers fit into these organizations, and how you might progress your learning. Chapter 3: HTML, CSS, and JS/TS for Extra Credit – presents more advanced topics that underpin the use of Vue.js. We will cover virtual DOM, CSS rules and specificity, before digging into JavaScript's many different capabilities and covering the basics of TypeScript. This chapter gives you many tools that you might not have in order to become a successful developer. You will also go over various API's that JavaScript enables you to access so that you have an understanding of what capabilities the browser provides.

📄 Page 12

Chapter 4: Understanding the Vue.js Instance - you will start your Vue.js journey by understanding the base technology and how to structure your components. In this chapter you will get exposed to the Options API variant of Vue.js components as a basic starting point. You will also gain understanding of the life cycle and how to hook into it to get better control of your component state. Chapter 5: Designing Component-Based UIs and Single Page Applications – throughout this chapter you will gain an understanding of how UIs can be constructed. This is not a chapter on design tools, but provides you, the developer, the tools and knowledge required to break apart a design and determine the interactions that you might need to build. Here you will be starting a prototype project from a given design. Chapter 6: Using the Composition API to Manage Component Logic – gives attention to the modern way of building Vue.js components. You will understand how to segment your components in order to reuse functionality across many different components. This way of building components was an optional add-on in Vue2 and baked into Vue3. It is fast becoming the default way of constructing user interfaces with the Vue framework. Chapter 7: Creating and Setting Up a Vue.js Application with Vue CLI and Vite – so far we have seen how to build components in different ways and how to make them fit together. This chapter looks, in detail, at how to bootstrap Vue.js projects quickly in order to get the most out of the framework. Of the various ways that are available for starting Vue.js projects, we will discuss using the Vue CLI, the old way, and Vite, the

📄 Page 13

new way, in detail. You will start building the prototype project in this chapter. Chapter 8: Adding a CSS Framework to the Mix – TailwindCSS, Bootstrap or Foundation – when working at a professional level, it is unlikely that you will be creating your own CSS for standard display elements. It is more likely that you will be using a CSS framework , hence, you will need to know how to integrate these frameworks into your application stack. This chapter covers integrating the three most widely used CSS frameworks. This chapter will equip you to expand the prototype project with TailwindCSS. Chapter 9: Building User Interfaces with Components – expands the readers' knowledge of building components through building the prototype project. We will be pulling together all the knowledge we have gained and putting it into practise. After working through setting up a working directory structure that suits our needs, we will set up the basic component templates and construct the various layouts that the project needs. Chapter 10: Routing Between Pages with VueRouter – single page applications are very limited without being able to navigate between the various “pages”. After the last chapter, we'll be expanding the prototype with more pages using VueRouter. We'll also discuss how VueRouter helps you direct and manage navigation based on state – authentication we're looking at you… Chapter 11: Interacting with the UI Using Events – at the moment, the UI is fairly boring. You can't have an event driven UI without events and in this chapter you'll understand the Vue.js events system, from standard

📄 Page 14

DOM events to custom events and basic component to component state management. Events are one of the cornerstones of building effective UIs, and interacting with your user, but also having components interact with each other. With this understanding, we'll expand the prototype application to respond to users. Chapter 12: Building Forms and Handling User Input – the next vital element that we need to learn is how to obtain information from your users and manage this data effectively so that it doesn't pollute your database, or expose your application to attack. Not only will you learn how to effectively build forms and manage the data within them, you will also get necessary experience in validating this data to ensure that it conforms to expected inputs, informing the user if it does not. The prototype application will also not be forgotten, we'll add forms to collect user data Chapter 13: Managing State with Pinia and API Communication – when building component based applications, as the application grows, it becomes necesssary to bring all the available state together into a This is where Pinia comes into play – the standard state management tool for the Vue.js ecosystem. Once we have understood how to utilise Pinia, we will cover the various ways we can get data into the application from a remote server. For this we will integrate data obtained via JSON ReST APIs and GraphQL. Chapter 14: Testing Vue.js Applications – understanding testing and how to test your application is vitally important. In a professional context, you will most likely end up writing more code in test files than you will for your actual application. This is normal, but many juniors (or those that are self-taught) do not understand the importance of testing. By the end of this

📄 Page 15

chapter, you will understand this and more. We will go over component and unit tests, integration tests and end-to-end testing and show that it does not need to be complicated. Chapter 15: Server-Side Rendering with Nuxt.js – with the core functionality now covered, it is time to strike out and look at some parts of the wider ecosystem. One of the biggest trends at the moment is server- side rendering, where for the Vue.js ecosystem, Nuxt.js is one of the bigger players. This chapter covers the basics of building a site with Nuxt.js, which combines much of what we have already covered, but in new and interesting ways. Chapter 16: Building Multi-tenanted Apps with Quasar – in this final content-rich chapter, we will explore Quasar, one of the many ways of getting your web application available across many different platforms using Vue.js and not having to learn a mobile-native language. Quasar allows you to build different types of applications that have the same UI implementation in common, reducing time to market and engineering overhead. This chapter aims to add this one size fits all framework to your toolbox. Chapter 17: Interview Questions – what good is learning all of this, if when you get to interview, and cannot answer any questions. This last chapter of the book goes some way to preparing you for technical questions that might be asked, plus provides pointers to other areas that you might need knowledge of.

📄 Page 16

Code Bundle and Coloured Images Please follow the link to download the Code Bundle and the Coloured Images of the book: https://rebrand.ly/93x9jcr The code bundle for the book is also hosted on GitHub at In case there’s an update to the code, it will be updated on the existing GitHub repository. We have code bundles from our rich catalogue of books and videos available at Check them out! Errata We take immense pride in our work at BPB Publications and follow best practices to ensure the accuracy of our content to provide with an indulging reading experience to our subscribers. Our readers are our mirrors, and we use their inputs to reflect and improve upon human errors, if any, that may have occurred during the publishing processes involved. To let us maintain the quality and help us reach out to any readers who might be having difficulties due to any unforeseen errors, please write to us at : errata@bpbonline.com

📄 Page 17

Your support, suggestions and feedbacks are highly appreciated by the BPB Publications’ Family. Did you know that BPB offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.bpbonline.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at : business@bpbonline.com for more details. At you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on BPB books and eBooks. Piracy If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at business@bpbonline.com with a link to the material. If you are interested in becoming an author If there is a topic that you have expertise in, and you are interested in either writing or contributing to a book, please visit We have worked with thousands of developers and tech professionals, just like you, to help them share their insights with the global tech community. You can make a

📄 Page 18

general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea. Reviews Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions. We at BPB can understand what you think about our products, and our authors can see your feedback on their book. Thank you! For more information about BPB, please visit Join our book’s Discord space Join the book’s Discord Workspace for Latest updates, Offers, Tech happenings around the world, New Release and Sessions with the Authors: https://discord.bpbonline.com

📄 Page 19

Table of Contents 1. Introducing Front-End Development with Vue.js Introduction Structure Objectives A brief history of web development The rise of Vue.js Comparing Vue.js with the competition Using Vue.js to solve problems – Case studies Case Study 1: Adding Vue.js into an already created site – client-side rendering Case study 2: Building a Vue.js-based website Conclusion

📄 Page 20

Points to remember Multiple choice questions Answers Questions Key terms 2. Working in Vue.js Roles Introduction Structure Objectives Working with Vue.js Freelancer/Consultant Design Studio Small business Small/Medium Enterprises