Javascript

Building a Custom Storyblok Field Type Plugin With Vue.js

In recent weeks I played around with a ton of headless content management systems. To cut a long story short: there are a lot of bad and a couple of pretty good ones out there. At the end of my journey, I was left with two systems I both very much enjoy: Contentful and Storyblok...

Read more

Building a Pre-Rendered Website With Nuxt.js and Storyblok

In recent weeks I played around with a ton of headless content management systems. To cut a long story short: there are a lot of bad and a couple of pretty good ones out there. At the end of my journey, I was left with two systems I both very much enjoy: Contentful and Storyblok...

Read more

How to Pre-render Vue.js Powered Websites With webpack

In my recent article, we built a landing page type website powered by a headless CMS and Vue.js. We've seen how quickly we can build a simple site with these two technologies. However there is still a major problem with the result of our work: the loading performance is pretty terrible...

Read more

Building Landing Pages with Vue.js and a Headless CMS

Although, nowadays, my main focus at work is to build app like websites, at my former employer, I generally worked on brochure pages. We built a variety of small to medium scale websites powered by the PHP based CMS Drupal. A couple of days ago, I started thinking about how I would build such sites today...

Read more

Dynamic Vue.js Layout Components

Vue.js is flexible enough to serve as a tool for either progressively enhancing certain parts of traditional server side rendered applications or powering very large scale single page applications, and everything in between. If you're using Vue.js to build complex single page applications you'll sooner rather than later encounter situations in which you need different page layouts for certain parts of your application...

Read more

Vue Router Page Transitions

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

Read more

Transition to Height Auto With Vue.js

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

Read more

Should I Store This Data in Vuex?

When first starting out with Vuex, most people wonder about 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...

Read more

Building Renderless Components to Handle CRUD Operations in Vue.js

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

Read more