Markus Oberlehner

Blog Page 16

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

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

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

Multi Export Vue.js Single File UI Components

In today's 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...

Magic Numbers in CSS: How to Identify and Fight Them

Recently I started thinking about magic numbers. Until this point I haven't given much thought to what the term “magic number“ actually means in the context of CSS. I thought about it as basically all numbers in my CSS. The logical solution was to use variables for everything. But having read some articles on this topic and after further thinking about it, I realised that not every number in your CSS code is inevitably a magic one...

How to Use GraphQL with Vue Apollo Components and Netlify Functions

Although I've already experimented a little bit with GraphQL, especially how to integrate GraphQL in a Vuex powered application, I never took the time to delve into the details. In today's article we'll build a simple example application using Apollo Components...

Building a Renderless reCAPTCHA v3 Form Component with Vue.js

The modern frontend stack is all about reusable components. The renderless component pattern is one of the most elegant ways of how to build highly reusable components. Today we'll build a renderless component for handling form submission, loading and error logic in a generic and reusable way. Additionally we'll take a look at how we can use the new reCAPTCHA v3 to secure our form from spam submissions...

Lazy Load Vue.js Components When They Become Visible

Over the last couple of years as a web developer, I've seen the same pattern over and over again: the homepage becomes a political issue within a company because every department wants to present itself and, of course, every department considers itself the most important. Usually, two things happen: a slider is added at the top of the page so that each department can get its slide at the very top, and more and more stuff is added to the homepage...

Using the Google Maps API with Vue.js

In today's article, we take a look at how we can use the Google Maps API in combination with Vue.js. We build a simple Vue.js component, which renders a Google Map. Furthermore, we learn how to listen for click events on markers and how we can cluster multiple markers in close distance to each other...