Preface

Are you looking to use Vue.js 3 for web applications, but don’t know where to begin? Frontend Development Projects with Vue.js 3 will help build your development toolkit and get ready to tackle real-world web projects, helping you get to grips with the core concepts of this JavaScript framework with practical examples and activities.

In this book, you’ll work on mini projects, including a chat interface, a shopping cart and price calculator, a to-do app, and a profile card generator for storing contact details. These realistic projects are presented as bitesize exercises and activities, allowing you to challenge yourself in an enjoyable and attainable way.

Here, you’ll discover how to handle data in Vue components, define communication interfaces between components, and handle static and dynamic routing to control the application flow. You’ll also work with Vite and Vue Devtools and learn how to handle transition and animation effects to create an engaging user experience. Later, you’ll discover how to test your app and deploy it to the web.

By the end of this book, you’ll gain the skills to start working like an experienced Vue developer, build professional apps that can be used by others, and have the confidence to tackle real-world frontend development problems.

Who this book is for

This book is designed for Vue.js beginners. Whether this is your first JavaScript framework or you’re already familiar with React or Angular, this book will get you on the right track. To understand the concepts explained in this book, you must be familiar with HTML, CSS, JavaScript, and Node package management.

What this book covers

Chapter 1, Starting Your First Vue Project, helps you understand the key concepts and benefits of Vue.js, how to set up the project architecture using the terminal (or command line), and how to create a simple Vue component with local data following the component fundamentals.

Chapter 2, Working with Data, enables you to monitor, manage, and manipulate data from various sources in your Vue.js components. You will learn how to utilize Vue’s powerful data reactivity and cache system through computed properties and how to set up advanced watchers to observe components’ data changes.

Chapter 3, Vite and Vue Devtools, introduces you to Vite and shows you how to debug these computed properties and events using Vue Devtools.

Chapter 4, Nesting Components (Modularity), helps you discover how to modularize a Vue application using component hierarchies and nesting. This chapter introduces concepts such as props, events, prop validation, and slots. It also covers how to use refs to access DOM elements at runtime.

Chapter 5, The Composition API, teaches you how to write isolated composables (or custom hooks) to reuse in multiple components using the Composition API with the setup() method, and how to build a scalable component system for your Vue project beyond using the classic Options API.

Chapter 6, Global Component Composition, helps you to organize your code using mixins and plugins, achieve global composition, and keep the code DRY (following the Don’t Repeat Yourself (DRY) principle) in any project. You will also understand the advantages and drawbacks of global composition, thus deciding the right approach to maximize your component’s flexibility.

Chapter 7, Routing, guides you through how routing and Vue Router work. You will learn how to set up, implement, and manage the routing system in your app with Vue Router.

Chapter 8, Animations and Transitions, helps you explore the essentials of Vue transitions and how to create your transition, including single-element animation and group-of-elements animation, and how to combine them with external libraries for further customization. You will also learn how to create full-page animations with transition routes.

Chapter 9, The State of Vue State Management, helps you understand how to manage the state (data) in a complex Vue application.

Chapter 10, State Management with Pinia, teaches you how the Pinia library makes managing the state easier.

Chapter 11, Unit Testing, introduces you to testing Vue components.

Chapter 12, End-to-End Testing, provides an explanation of End-to-End (E2E) testing and how it differs from Unit tests, as well as many examples of adding it to your Vue project.

Chapter 13, Deploying Your Code to the Web, helps you take a deep look into actually getting your Vue project live on the internet.

To get the most out of this book

Software/hardware covered in the book	Operating system requirements
Node Package Manager (npm)	Windows, macOS, or Linux
Yarn Package Manager (yarn)
Visual Studio Code (VS Code) IDE

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://packt.link/kefZM.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “An example of using the this instance is shown here: “

A block of code is set as follows:

export default {
  data() {
    return {
      yourData: "your data"
    }
  },
  computed: {
    yourComputedProperty() {
      return `${this.yourData}-computed`;
    }
  }
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

// header.vue
<script>
    import logo from 'components/logo.vue'
    export default {
        components: {
          logo
        }
    }
</script>

Any command-line input or output is written as follows:

node -v

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “We can do this by checking that it is called when clicking the Close button.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [e-mail] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

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 [e-mail] 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 authors.packtpub.com.

Share Your Thoughts

Once you’ve read Frontend Development Projects with Vue.js 3, we’d love to hear your thoughts! Please select https://www.amazon.in/review/create-review/error?asin=1803234997 for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?
Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application. 

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

1. Scan the QR code or visit the link below

https://packt.link/free-ebook/9781803234991

2. Submit your proof of purchase
3. That’s it! We’ll send your free PDF and other benefits to your email directly