Vue is a versatile framework used in creating SPA-type websites; It is a modular, component-based technology where a component can be seen as a small piece of code and we can group components together to create more complex components.
Vue is a small, simple and lightweight framework if we compare it with other frameworks like React or Angular, but its simplicity gives us windows like:
- Less steep learning curve than your competition.
- The framework is smaller than the competition (about 470 KB and 18 KB minified).
- It is a versatile framework which means that it can be used together with other solutions such as typescript.
- It is a reactive framework, which means that when your data model is updated the view is updated and vice versa.
- Vue is a progressive framework, which means that we can extend it through other officially supported plugins such as Vuex, Router, Testing, among others.
This book is mostly practical, we will learn the basics of Vue, knowing its main features based on a small application that we will expand chapter after chapter.
If you're looking for a Vue.js 3 book that lets you learn the framework from scratch—but with the practical perspective of someone who's already built real applications—this guide is for you.
I've been developing web applications for over a decade, and honestly, few technologies have given me such a balanced experience between simplicity and power as Vue. When I first used it, I was amazed at how quickly I could build a functional component without struggling with endless configurations.
Throughout this article, you'll understand what you need before starting, what to learn, how to structure your first projects, and how to recognize a truly good Vue.js 3 book.
Requirements
You don't need to be an expert, but it is important to know variables, functions, arrays, objects, and basic DOM manipulation. This is precisely the kind of fundamentals I review at the beginning of my personal projects to keep everything clear.
- Recommended Tools (Node, Vite, VSCode) Node.js for managing dependencies.
- Vite for quickly creating modern projects (although Vue CLI is still useful).
- VSCode with extensions like Volar for a better experience.
- First steps to prepare your environment: Install Node.
- Create a project with npm create vite@latest.
- Install dependencies with npm install.
- In my own development, I usually prefer Vite because of its faster reload speed and more up-to-date support.
Who is this book for
This book consists of 5 chapters, with which we will learn in detail the most important and basic features of Vue in version 3:
- Chapter 1: In this chapter we are going to learn about the basic features of Vue such as its main features, installation modes and project creation, we will make a hello world to present the main features of the web framework.
- Chapter 2: In this chapter we are going to learn about the 3 blocks of Vue, script block, template and style, in addition to creating small examples to present the main features of Vue.
- Chapter 3: In this chapter we are going to create our first CRUD type project using Vue and an existing CRUD type Rest Api; that is, a Rest Api with a limited scope using with Oruga UI as a component-based client-side web framework.
- Chapter 4: In this chapter we are going to create another CRUD type application in Vue using Naive UI instead of Oruga UI as a component-based web framework.
- Chapter 5: In this chapter we are going to create an application with Pinia and learn how to use this state manager and understand its components, which are the store, state, actions and getters.
Topics of the book
This book has a total of 5 chapters, it is recommended that you read in the order in which they are arranged and as we explain the experiments carried out, go directly to practice, replicate, test and modify the codes that we show in this book.
- Chapter 1: In this chapter we are going to review geometric transformations, translations and animations in CSS.
- Chapter 2: In this chapter, we are going to create many examples of CSS transitions applied to buttons, in these examples we will mainly apply geometric transformations, but we will also work with other CSS properties.
- Chapter 3: In this chapter, we are going to present different examples of CSS effects with the hover event; that is, we will continue using the CSS transitions as we did in the previous chapter; for these examples, we'll use any kind of HTML structure that won't be buttons like in the previous chapter.
- Chapter 4: In this chapter, we will create various effects using transitions, also, we will see their limitations through several examples that we will analyze in the next chapter using animations to achieve more complete animations.
- Chapter 5: In this chapter, we will present the use of animations, based on examples, we will see its possible variants, configurations and examples using animations and transitions.
This book has a practical approach, knowing the key aspects of the technology and moving into practice, gradually implementing small features of an application that has real scope.
To follow this book you need to have a computer with Windows, Linux or MacOS.
The book is currently in development…
I agree to receive announcements of interest about this Blog.
Learn Vue.js 3 from scratch with this practical and comprehensive guide. Master SPA development, components, and state management with Pinia, building real-world applications. Ideal for mastering this lightweight and powerful JavaScript framework.
Algunas recomendaciones:
Benjamin Huizar Barajas
Laravel Legacy - Ya había tomado este curso pero era cuando estaba la versión 7 u 8. Ahora con la ac...
Andrés Rolán Torres
Laravel Legacy - Cumple de sobras con su propósito. Se nota el grandísimo esfuerzo puesto en este cu...
Cristian Semeria Cortes
Laravel Legacy - El curso la verdad esta muy bueno, por error compre este cuando ya estaba la versi...
Bryan Montes
Laravel Legacy - Hasta el momento el profesor es muy claro en cuanto al proceso de enseñanza y se pu...
José Nephtali Frías Cortés
Fllask 3 - Hasta el momento, están muy claras las expectativas del curso