Become a ninja with Vue 3

This ebook helps you get the philosophy of Vue 3 (currently 3.4.21), the new tools (like TypeScript, Vite, esbuild...), the essential libraries (vue-router, @vue/test-utils, axios...), and each part of the framework in a pragmatic way. You will be able to kickstart your project by the end of the reading, and build your amazing apps!

If you want to go further, a Pro Pack is available with exercises to understand each step of building an application. That means tons of pragmatic code samples, tests for each step, good practices for every common use-case, and save tens of hours on your next project!

All examples use TypeScript and the Composition API to build a complete application with a router, forms, HTTP calls, tests, etc.

Learn more Buy now

Available in PDF, EPUB & HTML; English & French; Pay with PayPal or card with Stripe.

I've already bought this ebook, I want to download the latest version.
This ebook is regularly updated, see the full changelog.

ebook

Our experience with Vue.js

Accessible to anyone

The ebook is at a 'pay what you want' price, with a very low minimum, so everyone should be able to read it, from students to professionals. You can also give part of the price to sponsor the framework development team. A professional package is also available and includes exercises, with instructions, unit tests and solutions, and all what's needed to hit the ground running on your first app, saving you days of learning and mistakes.
We gave to this ebook the Ninja Squad touch: a subtle mix of light tone and professional content. You can have a feel of this touch by reading our blog or the free samples of the book.

In the book, we dive into

features

The Future of JavaScript


Vue.js apps can be written in plain old JavaScript but it is much better using the ECMAScript 6 features, or even better: the type-safety of TypeScript. Several chapters are dedicated to these topics, to understand them and write beautiful code.

features

Philosophy


Vue.js is a modern JavaScript framework supercharged with awesome features: we'll explore the templating syntax, architecture choices, routing, tests, forms, etc.

features

Best practices


This ebook and these exercises are the result of countless hours spent on different projects. They contain all the best practices we encountered. We would have saved so much time if we had that book when we started! We go over kickstarting, tests, code organisation, tips for production, and more!

features

Components


The whole framework is component oriented. Vue.js has an ecosystem of component libraries and plugins which grows every day. Who never needed a chart, a map, a timepicker or a data-grid?

features

Tests


As usual, we'll spend some time talking about tests and testing strategies. And if you choose the Pro Pack, you'll have dozens of unit and end-to-end test examples for every part of your app. This will make sure your code is robust and trustworthy!

features

Performance


The Vue.js team has done an incredible job performance-wise. We'll see how that works under the hood, what can we do to go further and produce blazingly fast apps.

Table of Contents

All the chapters you'll get to read in our ebook.
If you want to see the whole changelog, you can read it here.

1.  Introduction FREE

2.  A gentle introduction to ECMAScript 2015+ FREE

Transpilers

let

Constants

Shorthands in object creation

Destructuring assignment

Default parameters and values

Rest operator

Classes

Promises

Arrow functions

Async/await

Sets and Maps

Template literals

Modules

Conclusion

3.  Going further than ES2015+ FREE

Dynamic, static and optional types

Enters TypeScript

4.  Diving into TypeScript FREE

Types as in TypeScript

Enums

Return types

Interfaces

Optional arguments

Functions as property

Classes

Working with other libraries

5.  Advanced TypeScript FREE

readonly

keyof

Mapped type

Union types and type guards

6.  The wonderful land of Web Components FREE

A brave new world

Custom elements

Shadow DOM

Template

Frameworks on top of Web Components

7.  Grasping Vue's philosophy FREE

8.  From zero to something

The progressive framework

Vue CLI

Bundlers: Webpack, Rollup, esbuild

Vite

create-vue

Single File Components

9.  The templating syntax

Interpolation

Using other components in our templates

Property binding with v-bind

Events with v-on

Templates and TypeScript

Summary

10.  Directives

Conditions in templates with v-if

Hide content with v-show

Render only once with v-once

Repeating elements with v-for

HTML content with v-html

Raw content with v-pre

Other directives

11.  How to build components

Reactive property with ref

Reactive property with reactive

ref or reactive

Derive state with computed

Execute a side effect with watchEffect and watch

Passing props to components

Custom events with emit

Lifecycle functions

12.  Styles your components

Scoped styles

Module styles

v-bind en CSS

v-deep, v-global et v-slotted

PostCSS

CSS Pre-processors

13.  Composition API

Clean design with the Composition API

Extracting common logic in use…

Composition API outside of components

A community example: VueUse

14.  The many ways to define components

Options API

Composition API

Script setup

Class API

15.  The script setup syntax

Migrate a component

Implicit return

defineProps

defineEmits

defineOptions

Closed by default and defineExpose

16.  Testing your app

The problem with troubleshooting is that trouble shoots back

Unit test

Vitest

@vue/test-utils

Snapshot testing

End-to-end tests (e2e)

Cypress

17.  Send and receive data through HTTP

Getting data

Advanced options

Interceptors

Tests

18.  Slots

Content projection with slot

Named slot

Default content

Slot props

Typed slots with defineSlots

19.  Suspense

Display a fallback content

Error handling with onErrorCaptured

Suspense events

Suspense vs onMounted

script setup and await

20.  Router

En route

Navigation

Parameters

Router and Suspense

Passing parameters as props

Redirects

Route matching

Nested routes

Navigation guards

Meta information

21.  Lazy-loading

Async components

Async components and Suspense

Lazy-loading with the router

Grouping components in the same bundle

22.  Forms

The v-model directive

Better forms with VeeValidate

Custom form components

defineModel macro

23.  Provide/inject

A way to avoid props drilling

Testing components with inject

Hierarchical providers

Plugins and provide/inject

24.  State management

Store pattern

Flux-like libraries

Vuex

Pinia

Testing Pinia

Why use a store?

25.  Animations and transition effects

Pure CSS animations

Enter/leave transitions

List transitions

And more!

26.  Advanced component patterns

Template references with ref

Component references

27.  Teleport SOON

28.  Custom directives

Lifecycle hooks

Directive value

Directive argument

Directive modifiers

29.  Internationalization

vue-i18n setup

Translating text

Message parameters

Pluralization

Changing the locale

Formatting

Other features (lazy-loading, Vite support and more)

30.  Under the hood

Rendering changes

Template compilation

Virtual DOM

JSX

Reactivity

31.  Performances

First load

Asset sizes

Bundle your application

Tree-shaking

Minification and dead code elimination

Other assets

Compression

Lazy-loading

Server side rendering

Caching for reloads

Runtime performances

key in v-for

v-memo

32.  Going to production SOON

33.  This is the end

If you want to see the whole changelog, you can read it here.

The Pro Pack

Switch to second gear by building a real project, step by step!

Our ebook lets you learn all the features of the framework. But for Vue.js, we decided to go further to share our expertise, by selling a Pro Pack. The Pro Pack makes you create an application skeleton, craft your first components, routes and forms. And above all it teaches you how to write tests, how to handle secured HTTP calls when your user is authenticated, how to design a reactive application, how to integrate with CSS frameworks like Twitter Bootstrap, third party libraries like Moment.js, already available components, and how to design your own (like a chart for example). If you want to completely master the framework, and be able to throw yourself with confidence in any projects, the Pro Pack is for you.

The Pro Pack contains a set of exercises, allowing you to build the PonyRacer app from scratch, confronting yourself to all these common problems in modern JavaScript applications. For each step, you receive a set of instructions corresponding to one of the ebook chapter, and a set of unit and end-to-end tests to validate your code. A NodeJS module we wrote is here to help you analyze your code and compute your score. Your turn to solve the challenge with the help of our tips! When you're done, or if you're stuck, you can check the solution we made. Our platform allows you to follow your progress, and inform you when we update the exercises. You can then switch to this new version (for free), and start again where you stopped. It's a great way to see how the best practices evolve!

Exercises list

Here are all the lessons you can follow with the Pro Pack.

0. Getting started FREE

Let's generate the project skeleton, and begin our adventure!

1. Templates FREE

Learn a bit more about components and the templating syntax with a new component for the responsive menu.

2. List of races FREE

Create a new component to display the list of races.

3. Race detail FREE

Display a more friendly race detail, with a list of ponies.

4. Computed properties FREE

Use computed properties in your components.

5. Pony component

Add a nice pony component, with a beautiful 8-bit artwork image and a custom event.

6. Lifecycle hooks

Let's extract some logic and use it in the onMounted hook.

7. Script setup

The script setup syntax is great, let's use it!

8. HTTP

Fetch data over HTTP from the Ponyracer REST API.

9. Slots

Build advanced UI components with slots.

10. Suspense

Handle the loading of data with class 😎.

11. Router

Have nice URLs that mirror the content displayed using the Vue Router.

12. Register form

Build our first form using v-model.

13. Login form

Add some validation and errors with vee-validate.

14. Custom validators in forms

Add validation with built-in and custom validators.

15. State management

Display our logged in user and its score with the help of the Store pattern.

16. Remember me and logout

Having to log in every time is painful: let's remember our user for the next time! We also need a way to log her/him out.

17. State management with Pinia

Let's refactor our state management to use Pinia 🍍.

18. Transitions

Add some nice transition effects in our application.

19. HTTP with authentication

Some REST endpoints are secured: let's see what we need to do to call them, and how to use interceptors. Also a little introduction to JSON Web Token.

20. Websockets

Display the live race with real time data from the server over WebSockets!

21. Boost a pony

We can make a pony much faster by clicking on it: a good excuse to add a few rainbows and learn a testing trick.

22. Reactive user score

Our user score should update in real time. Another use-case for our state management using Websocket.

23. Protected routes with guards

Let's use guards to protect parts of our app.

24. Nested views and redirections

A real application often has nested views and redirections.

25. Lazy loading

The router can lazy-load parts of our app. Let's see how!

26. Charts in your app

Every professional app has its chart. Let's see how Vue can play with Chart.js.

27. Custom directive

Learn how to build a custom directive to simplify our templates.

28. Internationalization

Localization, pluralization and translations in Vue.

29. Performance tricks SOON

Vue is fast, but there are still a few tricks to learn to make our application faster.

30. Going to production SOON

Final step to deliver our app! What do we need to do to launch our product?

0

Pages A4

0

Paying readers

0

Pro Packs users

0

€ Given to sponsor the framework

Free samples

If you don't trust our style, or our capacity to provide a genuine DRM-free ebook in all major formats, have a look at these free extracts.
You can also try the first 6 exercises of the Pro Pack for free.

Ebook samples

English Free EPUB Free PDF Free HTML
French Free EPUB Free PDF Free HTML

Pro Pack test drive

Test the whole experience of the Pro Pack on the first 6 exercises, for free.
Setup, code, build, verify. Check your scope and progression, then jump to the next step!

Simply register on the the Pro Pack platform for a free test.

Build a complete app

Ponies, ponies, ponies!

animated pony
animated pony
animated pony

For this ebook, we needed a demo app. We could have built another TO DO list, or chat app, or Reddit clone, like there are already hundreds of. But we chose ponies. Because everybody loves a pony (a real-life unicorn). You'll learn to build an application to bet on ponies races, but above all, you'll learn about all the use-cases you may need in a real Vue.js application.

You'll learn to build components, the use the new composition API, forms, to send data to a server, to manage authentication, to build routes, to react to events, and a lot more! Give a try to our amazing PonyRacer demo application. All the code samples of this ebook are based on this app. That's also the same app that you'll learn to code step by step, exercise after exercise, with our Pro Pack.

Pricing And Plans

This book comes in two versions: one in English (for the world of developers to enjoy), one in French (for our fellow country-wo-men).
The Pro Pack (our online platform full of exercises) can be bought for a team of any size, with an appropriate discount.

ebook only

Pay what you want
  • PDF
  • ePUB
  • HTML
  • English
  • French
  • Exercises
  • Tests
  • Full project
  • Quizzes
  • Source code

Pro Pack

99 (with team discount)
  • PDF
  • ePUB
  • HTML
  • English
  • French
  • Exercises
  • Tests
  • Full project
  • Quizzes
  • Source code

Sponsor the Vue.js development team

Vue.js is free, but independant developers write and maintain it!

Ninja Squad chose to help sponsoring the framework development team. When buying our ebook, not only will you decide how much you want to pay, but also how much you want to give to sponsor the framework, if you want to. Our company is committed to make regular donations matching your choice.

Frequently Asked Questions

Because you always have exotic questions in your mind: we're here to bring you peace with nice answers.

 Is this ebook for me?
This ebook is for everyone wanting to discover or deepen their knowledge of Vue.js. Beginner students, experienced developers, absolute fans of other frameworks (Angular, React), and seasoned Vue.js 2.x users, everyone has found something useful in it.
But if you're already deeply familiar with Vue.js 3.x, you won't probably learn that much, besides some tips and best practices learned from our experience.
But this ebook can also be a nice gift for a friend! ;)
 I've never used Vue.js 2.x. Am I gonna understand anything?
Of course! This ebook does not require any knowledge of previous Vue.js versions.
If we point out some differences with Vue.js 2.x, you'll learn to build Vue.js apps from nothing but JavaScript.
 Your book and your exercises are full of sample code. They will be quickly out-of-date, right?
We're test addicts. Every piece of code given as example is statically analyzed and unit tested. While writing this book, we could upgrade with every Vue.js release and quickly spot every breaking change. Thus, you can be assured that every piece of code is working, and that any following Vue.js release won't break anything.Same thing for the Pro Pack: the project is fully updated and regenerated on every Vue.js release, with each step automatically tested.
 Will this book be updated with upcoming Vue.js releases?
Yes. We update this ebook very regularly, by adding new chapters, rewriting some, and migrating everything to every new Vue.js release. These updates are free for any buyer. Have a look at the full changelog. The ebook is currently written for Vue.js 3.4.21.
 Can I read a sample chapter?
Yes, even several of them! \o/
You can grab them for download in every language available (English and French), and every format available (PDF, EPUB, and HTML).
And a nice way to taste our writing style is to have a look at our blog.
 Which tools are you writing this book with?
We're writing in Asciidoc, and we're using AsciiDoctor to generate all expected formats (PDF, EPUB, and HTML). A build based on Vite analyzes every sample code, tests it, before embedding it in the ebook source.
 Why a digital book?
Without even mentioning trees sparing and easy logistic, we prefer a digital ebook over a physical book because we can easily update its content, might it be a typo or a new feature of the framework. Have a look at the full changelog.
 Why share the sales with the development team ?
Let's be clear: the ebook sales won't pay for the time of its writing, ever (every technical writer will say so).
But we are happy to sponsor, even modestly, the Vue.js development team. You can retribute the authors for their work, and optionally sponsor the framework development team, whatever the ratio you want.
 Do people buy this ebook? For real?
It's just the beginning, but we certainly hope so ! Many already bought and loved our previous books, in any case :) Already 1617 people bought our ebook. You can look at our sales figures, they are completely public.
 Are the files DRM-protected?
Absolutely not.
 Can I reuse this ebook commercially?
No, this is the only restriction: you may not sell it and use it commercially.
 And do I really have to provide my credit card number to a bunch of ninjas?
Pay what you want does not mean free!
You can pay with PayPal, or with your card through Stripe. In any case, we never have access to your card details.
 What do you do with my personal data?
We only collect your email, that we need to send you your purchase, your invoice, and an email from time to time to notify you when we update the ebook. You can ask us at any time to delete your email from our database (but we won't be able to send you the updates anymore).
 My company/accountant/spouse needs an invoice, are you providing one?
Yes, you'll get an invoice for every purchase. You'll even be able to customize the invoice with your own company details if you need to.
 My download link has expired. I lost my download link. What can I do?
Don't panic. Click here, enter the email address you used to buy the ebook, and you will receive a fresh download link by email. That also allows you to get the most recent version of the book.
 I would like to download the latest ebook version. It's possible, right?
Yes! Enter the enter the email address you used to buy the ebook on this page, and you will receive a new download link by email, pointing to the latest ebook revision of the book.
 Is it possible to try the Pro Pack for free?
Yes, it is. Just go to the Pro Pack platform, where you can register for a demo and enjoy the whole experience with the 6 first exercises for free.
 I want the Pro Pack for my whole team, is it possible?
Sure! You just have to input the needed quantity when buying, and you'll get an appropriate discount. Then, you can register your team members one by one, to open their access to the online platform. If you need further explanations, send us an email at contact at ninja-squad.com to talk about it.
 Do you offer trainings?
Thanks for asking! :) Yes, we offer trainings on Vue.js for every level, but also on other topics that might interest you.

About the author

author

Cédric Exbrayat


I'm a web developer, a member of the Angular team who's also interested in Vue.js, and one of the co-founders of Ninja Squad. The rest of the company is also heavily involved in this ebook, writing some parts, testing things and giving feedback.

Ninja Squad is a small shop of four developers, helping other teams to build their great products, with their frontend and backend. We value code quality above all, and we're all experienced developers, trying to share what we know with others. Books like this one are a great way to do this, and we are also writing a blog, answering on StackOverflow, teaching and training other developers, and organizing conferences, the dearest to our heart being MiXiT.

Buy this ebook

Which package?

How many?

By buying for your team, you'll save €{{ model.teamDiscount | number:0 }} on unit price!
After purchase, you can send the licences to each of your team member by email.

How much?

(tax included)
There is a minimum price of 5€

How to distribute?

The writers

{{model.percentage}}% = {{model.amount * model.percentage / 100 | number:2}}€

Vue.js

{{100 - model.percentage}}% = {{model.amount * (100 - model.percentage) / 100 | number:2}}€

Any discount code?

If you already bought our naked ebook, you can claim a discount code here.

What's your email?

You need to enter your email
Please provide the invoice details you need.
They can be whatever you want, and will be added as customer details on the invoice.