Become a ninja with Vue

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.

Buy

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.

  1. IntroductionFree
  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 TypeScriptFree
    • Types as in TypeScript
    • Enums
    • Return types
    • Interfaces
    • Optional arguments
    • Functions as property
    • Classes
    • Working with other libraries
  5. Advanced TypeScriptFree
    • readonly
    • keyof
    • Mapped type
    • Union types and type guards
  6. The wonderful land of Web ComponentsFree
    • A brave new world
    • Custom elements
    • Shadow DOM
    • Template
    • Frameworks on top of Web Components
  7. Grasping Vue’s philosophyFree
  8. From zero to somethingFree
    • 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. Style your components
    • Scoped styles
    • Module styles
    • v-bind in CSS
    • v-deep, v-global and 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. script setup
    • 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 slots
    • Fallback 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
    • Tests with vue-router-mock
  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
    • 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
    • Template references with useTemplateRef
    • Component references
  27. Custom directives
    • Lifecycle hooks
    • Directive value
    • Directive argument
    • Directive modifiers
  28. Internationalization
    • vue-i18n setup
    • Translating text
    • Message parameters
    • Pluralization
    • Changing the locale
    • Formatting
    • Other features (lazy-loading, Vite support and more)
  29. Under the hood
    • Rendering changes
    • Template compilation
    • Virtual DOM
    • JSX
    • Reactivity
  30. 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
    • Conclusion
  31. 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!

A beautiful retro-looking pony

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.

  1. Getting startedFree

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

  2. Templates quizFree

    An easy quiz to get started with the templating syntax. Ready?

  3. TemplatesFree

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

  4. List of racesFree

    Create a new component to display the list of races.

  5. Race detailFree

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

  6. Computed propertiesFree

    Use computed properties in your components.

  7. Pony component

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

  8. Component quiz

    Let's check if we remember everything we need to build components.

  9. Lifecycle hooks

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

  10. Script setup

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

  11. HTTP

    Fetch data over HTTP from the Ponyracer REST API.

  12. Slots

    Build advanced UI components with slots.

  13. Suspense

    Handle the loading of data with class 😎.

  14. Router quiz

    Let's check your knowledge of the router!

  15. Router

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

  16. Register form

    Build our first form using `v-model`.

  17. Login form

    Validation and errors with `vee-validate`.

  18. Custom validators in forms

    Add validation with built-in and custom validators.

  19. State management

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

  20. 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.

  21. State management with Pinia

    Let's refactor our state management to use Pinia 🍍

  22. Animations and transition effects

    Add some nice animations and transition effects in our application.

  23. 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.

  24. Websockets

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

  25. 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.

  26. Reactive user score

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

  27. Protected routes with guards

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

  28. Nested views and redirections

    A real application often has nested views and redirections.

  29. Router advanced quiz

    Let's check your knowledge of the router - part 2!

  30. Lazy loading

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

  31. Charts in your app

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

  32. Custom directive

    Learn how to build a custom directive to simplify our templates

  33. Internationalization

    Localization, pluralization and translations in Vue.

  34. Performance tricks

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

  35. Going to production

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

236Pages
1,408Buyers
512Pro Packs
1,603€ of donation to the Vue team

Free samples

Have a look at these free samples to give you an idea.

eBook

Read the 8 first chapters

EPUBPDFHTML

Pro Pack

Test the 6 first exercises

Test the exercises

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.

eBookPro Pack
Pay what you want€99.00
BuyBuy
PDF
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.

The author

Photo de Cédric Exbrayat

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, teaching and training other developers, and organizing conferences, the dearest to our heart being MiXiT.

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.

Buy « Become a ninja with Vue »

Choose your product
€ (ATI)
For the authors
€42.00 (100%)
For the Vue team
€0.00 (0%)
Enter your contact information