Vue.js 3 for Beginners (eBook)

Learn the essentials of Vue.js 3 and its ecosystem to build modern web applications

Simone Cuomo (Autor)

eBook Download: EPUB

2024
302 Seiten
Packt Publishing (Verlag)
978-1-80512-329-3 (ISBN)

Infos

Discover why Vue.js is a must-learn JavaScript framework for aspiring developers. If you're a beginner fascinated by Vue.js and its potential, then this book will show you how the progressive and versatile framework can help you build performant applications. Written by an accomplished software architect with over 12 years of experience, Vue.js 3 for Beginners provides a solid foundation in Vue.js and guides you at every step to create a robust social media application, component by component.
Starting with a clean canvas using plain HTML and CSS, you'll learn new topics to build your application incrementally. Beyond the core features, you'll explore crucial parts of the Vue.js ecosystem, such as state management with Pinia, routing with Vue Router, and testing with Vitest, and Cypress. The structured GitHub repository ensures a smooth transition from one chapter to the next, offering valuable insights into advanced topics, techniques, and resources. This book is designed to serve as a practical reference guide, allowing you to quickly revisit specific topics when needed.
By the end of the book, you'll have built a strong understanding of Vue.js and be ready to build simple applications effortlessly.

---

No detailed description available for "e;Vue.js 3 for Beginners"e;.

Textauszug

1

Exploring the Book’s Layout and Companion App

Vue.js is an enormously popular framework in the JavaScript (JS) ecosystem. In recent years, it has gained lots of popularity thanks to its simplicity, its great documentation, and, finally, its fantastic community. If you are starting web development now, or are transitioning from a different framework or language, Vue.js is a great choice.

Before we can jump into the main content of the book, it is important to learn how the book is structured and what methods will be used to explain the different topics of this fantastic framework.

To simplify the learning of Vue.js and make the book more interesting and interactive, the book has been built around the creation and enhancement of a Companion App.

Vue.js 3 for Beginners is going to focus mainly on the framework and its core libraries, and it will not cover basic development knowledge such as HTML, CSS, JS, and Git. To understand the content of this book, basic knowledge of these four topics is required.

The first part of this book is going to cover an important aspect of our learning journey and will provide you with important theoretical information that is needed for you to make the most of the book’s content; we will then jump into the specifics of Vue by introducing the framework and its core concepts in Chapter 2. Finally, from Chapter 3 onward, we will start to work on our application, one component at a time.

In this chapter, we’ll cover the following topics:

• The Companion App
• The core areas of a web application
• Component-based architecture

By the end of this chapter, you will learn about what we are going to build during the course of the book, and cover some theoretical aspects required for us to make the most of the Vue.js framework, such as component-based architecture and the architectural decisions behind the Companion App.

Technical requirements

The application that accompanies the book has been built using free software and APIs and will not require you to purchase anything. However, there are some specific technical requirements needed for you to follow along:

• Visual Studio Code or another equivalent IDE (integrated development Environment)
• Volar Visual Studio code extension
• A browser updated to the latest version (I suggest Chrome or Firefox)
• Node 16+
• GIT or a Git GUI (Graphic user interface) such as GitKraken installed on your machine

The companion app

Learning a new language or framework is not an easy task. There are plenty of free resources, such as documentation, blogs, and YouTube videos on the internet, but I believe learning a new tech requires practice, and there is no better way to achieve this than by building a production-ready, performant, scalable social media application together.

The application is going to be very similar to the social media platform X (formerly Twitter). We will start from a clean canvas and slowly add more features and functionality until the app is fully working and ready to be added to your portfolio and showcased at your next job interview.

Each chapter will have a set of sections that will help you navigate the book. This will not only ensure that you can always follow along and have a clear understanding of the scope of the chapter, but it also allows you to use the book as a reference after you have read it all and allows you to jump to a specific chapter if you need to do so.

Each chapter includes the following sections:

• Starting branch for the chapter
• The current state of the Companion App
• Definition of what will be added and achieved within the current chapter
• Multiple sections of explanation and coding
• Summary of what Vue.js topics we have learned in this chapter with a glossary

The Companion App features

As mentioned previously, the application that we are about to build will be very similar to an existing social media application. To make sure we cover most of the Vue.js features and its ecosystem, we may at times over-architect a specific component or feature, but when this happens, it will be called out so that you will have full knowledge of whether it is a good practice to follow in the future and what would be the correct implementation.

By following the book, you will learn the following:

• How to structure a web application using a component-based architecture
• How to create simple and complex HTML using Vue.js
• How to make the right decision to make your app performant and scalable
• How to communicate between components
• How to use external APIs to load dynamic data
• How to use state management using Pinia
• How to implement multiple pages (routing) using vue-router
• How to test your application using Vitest and Cypress
• How to create forms effectively using Vue.js
• How to debug your application using the Vue debugger

The preceding list is just an overview of what we will be achieving in the book, and we are going to make this learning fun and interactive by building using the Companion App together.

The application code

The code for the application can be found in this repository: https://github.com/PacktPublishing/Vue.js-3-for-Beginners. If you do not know what a repository is or how to use it, I suggest you learn the basics, even if all the information and commands you require to use the code will be provided in each chapter.

The repository has multiple branches for each chapter. This will be the starting point for each chapter and will be specified at the start of each chapter, as mentioned before.

The main branch of the repository is the latest commit, and it includes the complete application. If you have some time, I suggest you run the full application to try and browse it to see what we will achieve in the course of the book.

To run the application, you can simply follow the instructions available in the README.md file that is available at the root of the project.

As it is the first time that we are running the application, I will also provide the information required here to get the application up and running:

1. First, we need to get a copy of the remote repository on our machine. To do so, run the following command in the terminal: git clone https://github.com/PacktPublishing/Vue.js-3-for-Beginners
2. Then, we need to navigate into our newly created project folder: cd vue-for-beginners
3. Before we can run the project, we need to install all its dependencies using a package manager. A package manager is a piece of software that is used to install and manage the packages, in our case Node.js and JS, for which the project depends. The application shared in the repository supports all major package managers, such as npm, yarn, and pnpm. In the following example, we are going to use npm: npm install
4. Finally, it is time to run the project. The following command will run a development version of the project: npm run serve

After a few seconds, the local instance of the application will start, and you should be able to access it by opening the browser at HTTP://localhost:5173. The application should look like this.

Figure 1.1: Screenshot of the Companion App dashboard

Spend some time navigating the application, both in the browser and within the code base, to see what we will build in the course of the book.

In this section, we have learned about the Companion Application, how it is going to be used to support our learning, its core features, and finally, the commands required to run the application locally. In the next section, we will spend a few moments on the core areas of web applications and explain which technologies/libraries we are going to use in our application.

The core areas of a web application

The JS ecosystem is not shy of frameworks and libraries, but even with this extensive choice, they mostly share the same core values and areas. These are the core parts of a web application and no matter which framework you use to write your application, you will have to know this and have a basic understanding of what they mean.

The pillars of a web application are as follows:

• User interface (UI): This refers to the elements displayed on the screen from which a user can interact. In...

Produkt-Details

• Erscheint lt. Verlag: 20.9.2024
• Vorwort: Tracy Lee
• Sprache: englisch
• Themenwelt: Mathematik / Informatik ► Informatik ► Web / Internet
• ISBN-10: 1-80512-329-7 / 1805123297
• ISBN-13: 978-1-80512-329-3 / 9781805123293