[{"_1":2,"_70":-5,"_71":-5},"loaderData",{"_3":4,"_33":34,"_68":-5,"_69":-5},"root",{"_5":-5,"_6":-5,"_7":8,"_20":-5,"_21":22,"_23":24,"_27":28},"user","shoppingCartId","shoppingCart",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":12},"count",0,"free",true,"updatedAt","2026-01-08T21:15:07.262Z","paymentGateway","STRIPE","cartItems",[],"loading","toast","locale","en","constants",{"_25":26},"paypalClientId","AX53Cwz8jR6rVVzzZiZNWWXl0dGagi-GZrjG-S3Ua14E5nrKMn7DxDQ730O4R8LusLPp49ALn6aRVaEy","publishers",{"_29":30,"_31":32},"companies",[],"universities",[],"routes/_store+/_readers+/email_author.$slug/route",{"_35":36,"_67":-5},"book",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48},"id","Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6Qm9va1Byb2R1Y3QvMzEzMDI","title","Паттерны компонентов Vue.js","state","unpublished","contactAuthorMethod","email","aboutText","

What you'll learn

The goal of this course is to teach you the fundamentals to make Vue.js components that are simpler, more flexible and most of all fun to build and use!

This course is the fastest way to get up to speed with advanced Vue.js concepts and is guarantueed to jump start your learning.

Who is this course for?

This course is for everyone with a basic understanding of Vue.js who wants to learn more about using components effectively.

Why you should learn more about components

Having build frontends in multiple frameworks, I'm fascinated by how all these frameworks converge on the very same idea of a reusable component.

And it really is a repeating pattern. You have a component which encapsulates state, logic and even styling. With props in and events out, you can use these components to compose complex UIs.

It is therefore well worth to invest more time in learning how to work with components effectively

What you'll learn

The full course is currently 12 chapters long with more content added constantly.

Fundamentals of building portable components with Vue.js
How to solve every day problems with Component Composition using Vue.js slots and scoped slots
Create Headless or Renderless components for maximum flexibility
Build Functional components in cases where a template is not flexible enough
Dynamic Component Rendering instead of lots of if/else statements
How to use Mixins, Extends, High Order Components and why you should favor composition
Refactor large and complex components into Smart vs. Dumb Components
You learn about the Prop Drilling Problem and some easy ways to fix it
How to use the Provide/Inject Pattern to build composite components
Async component loading to improve your apps loading time
How to build well behaving components
Component Antipatterns - what not to do

Exercises with Solutions

Apply what you learn with more than 12 interesting and real-life exercises with solutions.

Some components you will build:

Flexible Card Components
Twitter Stream
Filtered Lists
Countdown Timer
Data Provider
Themeable Components

The Community

Join the discussion in our Community at spectrum.chat. Show your solutions, give feedback and have fun!

Work in Progress

The Vue.js Component Patterns course is still in production and the price increases as more lessons become available. Get the course today and save a bunch on our Early Access Offer.

","authors",[49,61],{"_37":50,"_51":52,"_5":53},"Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6UHJvZHVjdEF1dGhvci8zMjc2NA","name","Frederik Dietz",{"_54":55},"avatar",{"_56":57,"_58":59,"_60":12},"url","https://d39qdlcrvnra4b.cloudfront.net/avatars/93538/medium/photo2.jpg?1534406322","styleName","medium","exists",{"_37":62,"_51":63,"_5":64},"Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6UHJvZHVjdEF1dGhvci8zMjc2NQ","Alexey Pyltsyn",{"_54":65},{"_56":66,"_58":59,"_60":12},"https://d39qdlcrvnra4b.cloudfront.net/avatars/775735/medium/4408379.png?1530973790","currentUser","routes/_store+/_layout","routes/_store+/_readers+/_layout","actionData","errors"]

Email the Authors