Vue.js is flexible enough to serve as a tool for either progressively enhancing certain parts of traditional server-side rendered applications or powering large scale single-page applications, and everything in between. If you build complex single-page applications, you'll most likely encounter situations where you need different page layouts for certain parts of your app...
In my last article, we've explored how to use the powerful Vue.js transition component, to animate an element from zero height to auto height. Today we'll take a look at how we can utilize the transition component to create fancy transitions between different pages of a Vue Router powered Vue.js application...
Every now and then, I end up in a situation where I need to animate an HTML element from `height: 0` to its natural height (`height: auto`). Based on my experience, I already know that there are only three ways of achieving this: transitioning from `max-height: 0` to `max-height: Xpx`, transitioning from `transform: scaleY(0)` to `transform: scaleY(1)` and JavaScript magic...
When first starting with Vuex, most people wonder what data should be stored in Vuex in the first place? In the journey of answering this question, for many people (including me) comes what I call the “Let's Store Everything in Vuex” phase. But very quickly, after having encountered the first obstacles, comes the realization that this cannot be the be-all and end-all solution to managing state in Vue.js applications...
In episode 81 of the Full Stack Radio podcast Adam Wathan and Evan You talked about the possibility of utilizing the power of slot scopes to build components which sole purpose is to fetch data and provide the result via slot scope properties to the markup. In today's article we're going to take this into practice and we even go a little further: we'll build “renderless components” to handle all CRUD operations in a reusable way...
In my opinion, one of the most significant features of Vue.js, is the ability to build custom form components with ease. Thanks to `v-model` and the straightforward event system, we can build powerful new form components or enhance existing form fields and input types with superpowers...
Today we will take a look at how to replicate the Twitter Tweet Box (the text area you use to compose new tweets) using Vue.js. At first glance, the Tweet text field might look like a straightforward `<textarea>` element, but it is not. It's certainly much more complicated than that. In this article, we'll find out why the Twitter Tweet Box isn't a simple `<textarea>` element and how the developers of Twitter have solved this problem. Furthermore, we'll explore a more convenient way, of how we can recreate the same functionality in Vue.js...
As most of my regular readers have probably already noticed, I'm a huge fan of testing all the things. In many of my recent articles, we've already explored multiple techniques for unit testing and acceptance testing. Unit testing ensures that certain parts (or _units_) of our code do work correctly with acceptance testing, we can guarantee that what we've built does what it should do. Visual regression testing makes it possible that we can test if our application looks the way it's supposed to look...
Today we build a custom date input component powered by Vue.js. Although there is a native date input type available in all modern browsers, there are certain situations where the native date input field falls short. So let us take a look at how we can build a custom date input field with Vue.js...
Although testing, and especially acceptance testing, seems like a rather boring topic (at least to many developers) in the past few months I acquired an interest in optimizing the test setup and come up with better ways of writing tests. Especially when using Nightwatch.js in combination with Cucumber.js, there is another challenging aspect to it: writing step definitions...