
Become a ninja
with Vue
This ebook helps you get the philosophy of Vue 3 ans its novelties (Composition API, script setup, Vue Vapor...), the tools (like Vite, esbuild...), the essential libraries (vue-router, @vue/test-utils, pinia...), 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. You'll 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.
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. The current version uses Vue 3.5.13.
What you will learn
Discover what we will cover in this book
Modern Vue
The eBook and the exercises focus on modern Vue : Composition API, script setup, and of course TypeScript.
How it works
You will of course discover the syntax of the templates, the routing, the tests, the forms. But the eBook also explains how the framework works, why some choices are better than others, and the reasons behind design choices.
Best practices
The eBook and the exercises have changed and matured over time, with the evolutions of the framework and thanks to our long experience working on real-life projects. Gain time by benefitting from this experience, gotchas, tips, performance tricks and best practices.
Components
Learn how to best design your pages by dividing them into components. Learn the various ways to make them communicate with each other. Integrate ready-to-use libraries into your applications.
Tests
We'll also spend some time talking about automated tests (unit test and end-to-end tests), and learn how to write, execute and maintain them. If you buy the Pro Pack, all the exercises consist in making automated tests pass, and these tests can guide you when writing your owns.
Performance
Performance is at the heart of many architectural choices made by Vue. You will learn the how, but also the why. And we'll make sure you can write efficient code while not falling into common traps.
Table of contents
Here are all the chapters of our eBook. You can also look at the changelog here.
- IntroductionFree
- 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
- Going further than ES2015+Free
- Dynamic, static and optional types
- Enters TypeScript
- Diving into TypeScriptFree
- Types as in TypeScript
- Enums
- Return types
- Interfaces
- Optional arguments
- Functions as property
- Classes
- Working with other libraries
- Advanced TypeScriptFree
- readonly
- keyof
- Mapped type
- Union types and type guards
- The wonderful land of Web ComponentsFree
- A brave new world
- Custom elements
- Shadow DOM
- Template
- Frameworks on top of Web Components
- Grasping Vue’s philosophyFree
- From zero to somethingFree
- The progressive framework
- Vue CLI
- Bundlers: Webpack, Rollup, esbuild
- Vite
- create-vue
- Single File Components
- The templating syntax
- Interpolation
- Using other components in our templates
- Property binding with
v-bind
- Events with
v-on
- Templates and TypeScript
- Summary
- 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
- Conditions in templates with
- How to build components
- Reactive property with
ref
- Reactive property with
reactive
ref
orreactive
- Derive state with
computed
- Execute a side effect with
watchEffect
andwatch
- Passing
props
to components - Custom events with
emit
- Lifecycle functions
- Reactive property with
- Style your components
- Scoped styles
- Module styles
v-bind
in CSSv-deep
,v-global
andv-slotted
- PostCSS
- CSS Pre-processors
- Composition API
- Clean design with the Composition API
- Extracting common logic in
use…
- Composition API outside of components
- A community example: VueUse
- The many ways to define components
- Options API
- Composition API
- Script setup
- Class API
script setup
- Migrate a component
- Implicit return
defineProps
defineEmits
defineOptions
- Closed by default and
defineExpose
- 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
- Send and receive data through HTTP
- Getting data
- Advanced options
- Interceptors
- Tests
- Slots
- Content projection with
slot
- Named slots
- Fallback content
- Slot props
- Typed slots with
defineSlots
- Content projection with
- Suspense
- Display a fallback content
- Error handling with
onErrorCaptured
- Suspense events
Suspense
vsonMounted
script setup
andawait
- Router
- En route
- Navigation
- Parameters
- Router and Suspense
- Passing parameters as props
- Redirects
- Route matching
- Nested routes
- Navigation guards
- Meta information
- Tests with vue-router-mock
- Lazy-loading
- Async components
- Async components and
Suspense
- Lazy-loading with the router
- Grouping components in the same bundle
- Forms
- The
v-model
directive - Better forms with VeeValidate
- Custom form components
defineModel
macro
- The
- Provide/inject
- A way to avoid props drilling
- Testing components with
inject
- Hierarchical providers
- Plugins and provide/inject
- State management
- Store pattern
- Flux-like libraries
- Pinia
- Testing Pinia
- Why use a store?
- Animations and transition effects
- Pure CSS animations
- Enter/leave transitions
- List transitions
- And more!
- Advanced component patterns
- Template references with
ref
- Template references with
useTemplateRef
- Component references
- Template references with
- Custom directives
- Lifecycle hooks
- Directive value
- Directive argument
- Directive modifiers
- Internationalization
- vue-i18n setup
- Translating text
- Message parameters
- Pluralization
- Changing the locale
- Formatting
- Other features (lazy-loading, Vite support and more)
- Under the hood
- Rendering changes
- Template compilation
- Virtual DOM
- JSX
- Reactivity
- 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
inv-for
v-memo
- Conclusion
- This is the end
The Pro Pack
Switch to second gear by building a real project, step by step!
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!

PonyRacer
Build a complete application
Thanks to the Pro Pack, you will create an application to bet on pony races (because everybody loves ponies), but above all, you will learn about all the use-cases you may need in a real Vue application.
Exercises list
Here are all the lessons you can follow with the Pro Pack.
- Getting startedFree
Let's generate the project skeleton, and begin our adventure!
- Templates quizFree
An easy quiz to get started with the templating syntax. Ready?
- TemplatesFree
Learn a bit more about components and the templating syntax with a new component for the responsive menu.
- List of racesFree
Create a new component to display the list of races.
- Race detailFree
Display a more friendly race detail, with a list of ponies.
- Computed propertiesFree
Use computed properties in your components.
- Pony component
Add a nice pony component, with a beautiful 8-bit artwork image and a custom event.
- Component quiz
Let's check if we remember everything we need to build components.
- Lifecycle hooks
Let's extract some logic and use it in the `onMounted` hook.
- Script setup
The `script setup` syntax is great, let's use it!
- HTTP
Fetch data over HTTP from the Ponyracer REST API.
- Slots
Build advanced UI components with slots.
- Suspense
Handle the loading of data with class 😎.
- Router quiz
Let's check your knowledge of the router!
- Router
Have nice URLs that mirror the content displayed using the Vue Router.
- Register form
Build our first form using `v-model`.
- Login form
Validation and errors with `vee-validate`.
- Custom validators in forms
Add validation with built-in and custom validators.
- State management
Display our logged in user and its score with the help of the Store pattern.
- 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.
- State management with Pinia
Let's refactor our state management to use Pinia 🍍
- Animations and transition effects
Add some nice animations and transition effects in our application.
- 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.
- Websockets
Display the live race with real time data from the server over WebSockets!
- 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 to master time.
- Reactive user score
Our user score should update in real time. Another use-case for our state management using Websocket.
- Protected routes with guards
Let's use guards to protect parts of our app.
- Nested views and redirections
A real application often has nested views and redirections.
- Router advanced quiz
Let's check your knowledge of the router - part 2!
- Lazy loading
The router can lazy-load parts of our app. Let's see how!
- Charts in your app
Every professional app has its chart. Let's see how Vue can play with Chart.js.
- Custom directive
Learn how to build a custom directive to simplify our templates
- Internationalization
Localization, pluralization and translations in Vue.
- Performance tricks
Vue is fast, but there are still a few tricks to learn to make our application faster.
- Going to production
Final step to deliver our app! What do we need to do to launch our product?
Free samples
Have a look at these free samples to give you an idea.
Pricing and Plans
This book comes in two languages: English and French. The Pro Pack (our online platform full of exercises) can be bought for a team of any size, with an appropriate discount.
eBook | Pro Pack | |
---|---|---|
Pay what you want | €99.00 | |
Buy | Buy | |
ePUB | ||
HTML | ||
English | ||
French | ||
Exercises | ||
Tests | ||
Complete project | ||
Quiz | ||
Source code of the app |
Frequently Asked Questions
Because you always have exotic questions in your mind: we're here to bring you peace with nice answers.
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.
This ebook can also be a nice gift for a friend! ;)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.
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.
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 reward the authors for their work, and optionally sponsor the framework development team, whatever the ratio you want.Absolutely not.
No, this is the only restriction: you may not sell it and use it commercially.
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).
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.
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 hello+books@ninja-squad.com to talk about it.
Thanks for asking! :) Yes, we offer trainings on Vue.js for every level, but also on other topics that might interest you.
Our support to Vue.js
Vue.js is free, but independent 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.