Building Advanced Vue.js Applications

Read articles about building advanced applications with Vue.js and Vuex. The articles are mostly about advanced Vue.js techniques like Vuex best pratices, renderless components and other advanced techniques for structuring large scale Vue.js applications.

If you want to learn even more about advanced Vue.js techniques you can sign up for the Newsletter of my upcoming book.

Implementing the Builder Pattern in Vue.js Part 1: Listings

Recently I've seen a great talk by Jacob Schatz about Phenomenal Design Patterns in Vue. One of the patterns he mentioned in his talk was the Builder Pattern. I found his example very interesting, so it was clear to me that I had to experiment with this pattern myself...

Read more

The IoC Container Pattern with Vue.js

In this article we will experiment with implementing the IoC container pattern in Vue.js. The IoC container pattern is very popular in other languages and frameworks, but not so much in the JavaScript world – we'll also take a look at why that might be so...

Read more

Dependency Injection in Vue.js Applications

I often wonder how to best decouple certain parts of an application. At first this seems pretty straightforward in the context of Vue.js applications. You have components and components pass down properties and emit events, that's it. Right? Yeah, kinda. But also kinda not...

Read more

Distributed Vue.js Applications Part 1: Loading Components via HTTP

Imagine the following scenario: We have a central content distribution server responsible for pushing new content (think of news articles for example) to a variety of Vue.js-based client applications. But we not only want to push new content but also describe the shape of the content via Vue.js components...

Read more

Vue.js Error Handling with Renderless Components

Solid error handling is one those things which can make the difference between a good application and a great application. In todays article we'll take a look at how we can build renderless components to help us capture errors in our Vue.js applications...

Read more

Renderless Vue.js Lifecycle Hook Components

Reusing logic and keeping your codebase DRY should be one of your top priorities. In a Vue.js application components are the most important means of code reuse. But usually we think of components as a combination of markup, logic and CSS. At first, it might not be very intuitive to use components to provide only logic and not render anything at all...

Read more

Integration Testing Vue.js Container Components With Cypress

In my previous article about Advanced Component Composition, we wrote Unit Tests for all of our Vue.js components except the Container Components. Writing Unit Tests for components with a lot of external dependencies (e.g. making API calls or accessing the $route object) is usually very hard to do because most of the time you have to mock a lot of their dependencies...

Read more