Blog

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

Container Components in Vue.js: Advanced Component Composition

When building large scale applications where it is a top priority to achieve high test coverage, you are often faced with the problem that it becomes very difficult to test some of the components of the application. A common reason for this is that you have to mock a lot of global dependencies like the Vue Router or the Vuex Store...

Read more

Reusing Logic With Renderless Vue.js Frame 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

Multi Export Vue.js Single File UI Components

In todays article we'll learn how to build Vue.js Single File Components (SFC) which export multiple components at once using ES6 named exports. Furthermore we'll utilize render functions to render the markup of our components via JSX. By combining these techniques, we are able to create UI components that consist of several separate components combined into a single file...

Read more