# Vue

Advanced Vue Component Design

I just finished rewatching a few lessons from the Advanced Vue Component Design course by Adam Wathan and realised what a valuable resource it is. If you wish to learn something more about renderless components it's unbeatable.

Link

Stub lifecycyle hooks in Vue

It's quite a common pattern to initialise a component in a created() or mounted() hook. The problem is that these hooks will execute every time a component is mounted as part of the tests and it may not be what you want.

Link

Mock asynchronous API calls in Vue component tests

This post collects a few notes on how to mock asynchronous API calls when testing Vue components.

Link

Create portals to render content in another part of the DOM, instead of inside the Vue component

Portals provide a way to render content into a DOM node that exists outside the hierarchy of the Vue component that creates the portal. The concept of portals also exists in React. When the need arises I rely on the portal-vue library to create portals, which provides a really clean syntax.

Link

Handle single and double clicks on the same element in Vue.js

I was looking for a way to handle single click and double click events on the same element in Vue.js. At first it looked like 'v-on:dblclick' is going to cover this requirement nicely, but I soon discovered it's not ideal. While double clicking the 'click' event fires too (as soon as the first click of an intended double click is registered), which makes it hard to handle both types of events at the same time.

Link

State management in Vue.js

Vue.js adopts a one-way data flow model, which means that state always flows from the parent components to the child components and is usually passed via props. This is a great way of managing state, because it makes things predictable. Ultimately, state needs to be shared between components. This post will explore ways in which parent and child components can share state and most importantly how child components can pass state back to their parents.

Link

Custom validator function that checks if object properties exist in Vue.js

Sometimes when passing an object as a prop to a Vue component it's important to verify that it contains all expected properties. In Vue.js this can be accomplished by writing a custom validator function.

Link

Two ways of testing Vue.js components

I've been working more with Vue.js lately and got familiar with two slightly different ways of testing Vue.js components.

Link